最近在使用百度地圖的時候遇到過一個問題，就是從資料庫中進行加載資料，循環加載多個marker點，并且為每個marker點添加相對應的資訊展示視窗，在實際執行的過程中，點選marker的時候顯示的資訊視窗總是顯示的最後一次加載的資訊，之前也遇到過這種問題，沒進行總結，故忘記了之前的解決方法是什麼，今天又遇到的同樣的問題，抓狂，沒進行總結帶來的問題，是以在這裡進行說明一下解決方法，以此借鑒學習，有錯誤之處請指出。謝謝！
直接附上相應代碼标出：可以直接觀看紅色标出部分，為閉包實作，加載多個視窗的關鍵問題所在。有相應的背景實作程式，是以不能直接運作。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowNurseryInfo.aspx.cs"
Inherits="Bim5D_Web.Nursery.ShowNurseryInfo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height: 100%">
<head>
<meta charset="utf-8">
<link href="../bootstrap/css/bootstrap.min.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F9d8685549a1026cb4b5fa6561ab8962"></script>
<script type="text/javascript" src="../Scripts/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<style>
.menu-text {
color: black;
font-weight: bold;
}
.baidu-maps label {
max-width: none;
}
body, html
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#allmap
{
margin-right: 0px;
height: 96%;
overflow: hidden;
}
ul li {
margin-left: 50px;
}
</style>
<script>
$(function () {
initMarker("");
})
//單擊單個苗圃事件
function LoadPartial(id, systemid) {
initMarker(id);
}
//加載标注點
function initMarker(id) {
$.ajax({
type: "POST",
url: "Ashx/HandlerNurseryInfo.ashx",
dataType: "json",
async: false,
data: { "id": id },
success: function (data) {
map.clearOverlays();
var i = 0;
var points = [];
for (var item in data.nurseryInfo) {
(function (x) {
//建立标注
var pt = new BMap.Point(data.nurseryInfo[item].MapPointX, data.nurseryInfo[item].MapPointY);
points[i] = pt;
var marker = new BMap.Marker(pt);
map.addOverlay(marker);
var label = new BMap.Label(data.nurseryInfo[item].Name, { offset: new BMap.Size(30, -10) });
marker.setLabel(label);
label.setStyle({
color: "White",
fontSize: "14px",
backgroundColor: "#5CACEE",
border: "0"
});
//建立資訊視窗
var opts = {
width: 400, // 資訊視窗寬度
height: 120, // 資訊視窗高度
title: "<strong style=\"font-size:16px;font-weight:bold\">" + data.nurseryInfo[item].Name + "</strong>", // 資訊視窗标題
enableMessage: true, //設定允許資訊窗發送短息
message: ""
}
var showInfo = "位址：" + data.nurseryInfo[item].Addresss + "<br/>" + "描述：" + data.nurseryInfo[item].BasicFacts + "<br/>面積：" + data.nurseryInfo[item].HouseArea + "<br/>地塊個數:" + data.nurseryInfo[item].nurseryBlockCount;
var infoWindow = new BMap.InfoWindow(showInfo, opts); // 建立資訊視窗對象
marker.addEventListener("click", function (e) {
//map.centerAndZoom(pt, 12);
marker.openInfoWindow(infoWindow, pt); //開啟資訊視窗
});
map.addOverlay(marker);
i++;
})(i);
}
if (id == "") {
map.setViewport(points);
} else {
map.setViewport(points);
setTimeout(function () {
map.setZoom(14);
}, 100); //0.1秒後放大到14級
}
},
error: function (error) {
alert("加載失敗，請檢查網絡或其他原因");
}
});
}
//清除覆寫物
function cleardd() {
for (var i = 0; i < overlays.length; i++) {
map.removeOverlay(overlays[i]);
}
overlays.length = 0;
}
</script>
<body style="height: 100%; margin: 0">
<%----表單--%>
<form id="form1" runat="server">
<input type="hidden" id="hdCityName" runat="server" />
</form>
<%----整體Div--%>
<div style="width: 100%; height: 100%;">
<%--内容--%>
<div id="Div3" style="width: 100%; height: 100%; float: left;">
<div id="Div4" style="width: 15%; height: 100%; float: left;">
<div style="width: 100%;height: 20%;">
<span style="font-size:22px;font-weight: bold">工作統計</span><br/>
<span style="font-size: 16px;line-height: 40px;">苗圃管理：<input class="form-control" readonly="readonly" id="txtNurseryManage" runat="server" style="width: 50%;display:inline;height: 25px;" />個</span><br/>
</div>
<div style="width: 100%;height: 5%;">
<span style="font-size:22px;font-weight: bold">苗圃清單</span>
</div>
<div style="width: 100%; height: 75%; float: left; ">
<%--苗圃清單--%>
<div class="page-sidebar" id="sidebar" style="overflow-y: auto;height: 600px;">
<ul class="nav sidebar-menu">
<%=Nursery%>
</ul>
</div>
</div>
</div>
<div id="allmap" style="width: 85%; height: 100%; float: left;" class="baidu-maps">
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map執行個體
map.centerAndZoom(new BMap.Point(116.659468, 40.137477), 12); // 初始化地圖,設定中心點坐标和地圖級别
map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件
map.setCurrentCity("北京"); // 設定地圖顯示的城市 此項是必須設定的
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
</script>
</html>
