188 阿裏雲技術社區[雲棲]

地圖開發添加標注物

最近幾年在搞地圖方麵的開發，主要是循環為坐標添加標注並為標注添加彈出信息窗口，起初我的代碼如下：

[javascript] view plain copy

var map = new BMap.Map("Mapcontainer");
var JsonObj = eval(JsonStr);
if (JsonObj != null) {
for (var i = 0; i < JsonObj.length; i++) {
var point = new BMap.Point(JsonObj[i].Visit_GPS_Longitude, JsonObj[i].Visit_GPS_Latitude); // 創建點坐標
map.centerAndZoom(point, 13);
var marker = new BMap.Marker(point);
var opts = {
width: 250, // 信息窗口寬度
height: 100, // 信息窗口高度
title: '' + JsonObj[i].CustomerName + '' // 信息窗口標題
}
//marker.setAnimation(BMAP_ANIMATION_BOUNCE);
var content = "進店時間 " + JsonObj[i].VisitBeginTime + " 離店時間 " + JsonObj[i].VisitEndTime;
var info_Window = new BMap.InfoWindow(content, opts); // 創建信息窗口對象
marker.addEventListener("click", function () {
this.openInfoWindow(info_Window);
});
map.addOverlay(marker);
}
map.addControl(new BMap.NavigationControl());

這樣子確實能添加標注，也彈出信息窗口，但是問題來了！彈出的信息窗口沒有變化，也就是說本來不同的標注上彈出的信息窗口應該是不一樣的，可以不知道怎麼回事

彈出的信息窗口一直是最後的那個信息窗口！折騰了好久，最後終於解決了，具體的代碼如下：

[javascript] view plain copy

var map = new BMap.Map("Mapcontainer");
var JsonObj = eval(JsonStr);
if (JsonObj != null) {
for (var i = 0; i < JsonObj.length; i++) {
(function (x) {
var point = new BMap.Point(JsonObj[x].Visit_GPS_Longitude, JsonObj[x].Visit_GPS_Latitude); // 創建點坐標
map.centerAndZoom(point, 13);
var marker = new BMap.Marker(point);
var opts = {
width: 250, // 信息窗口寬度
height: 100, // 信息窗口高度
title: '' + JsonObj[x].CustomerName + '' // 信息窗口標題
}
//marker.setAnimation(BMAP_ANIMATION_BOUNCE);
var content = "進店時間 " + JsonObj[x].VisitBeginTime + " 離店時間 " + JsonObj[x].VisitEndTime;
var info_Window = new BMap.InfoWindow(content, opts); // 創建信息窗口對象
marker.addEventListener("click", function () {
this.openInfoWindow(info_Window);
});
map.addOverlay(marker);
})(i);
}
map.addControl(new BMap.NavigationControl());

同樣是一個循環，但是在循環中使用了一個匿名函數，從而造成一個閉包將 i 的值鎖定在裏麵，這樣外部的值已經變化，

但是傳到閉包裏麵的值已經被保留，也就可以順利拿到應該取到的address[i]的內容了。
這樣雖然解決了問題，但是每添加一個點都會創建一個匿名函數，內存泄漏可能會是潛在隱患。
接下去，我們就可以自由的在地圖上標注點並顯示對應的信息了！

最後更新：2017-04-03 12:56:23