最近在使用百度地图的时候遇到过一个问题，就是从数据库中进行加载数据，循环加载多个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>
