最近幾年在搞地圖方面的開發,主要是循環為坐标添加标注并為标注添加彈出資訊視窗,起初我的代碼如下:
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: '<span style="font-size:15px;color:#0a8021">' + jsonobj[i].customername + '</span>' // 資訊視窗标題
}
//marker.setanimation(bmap_animation_bounce);
var content = "進店時間 " + jsonobj[i].visitbegintime + "<br/>離店時間 " + 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());
這樣子确實能添加标注,也彈出資訊視窗,但是問題來了!彈出 的資訊視窗沒有變化,也就是說本來不同的标注上彈出 的資訊視窗應該是不一樣的,可以不知道怎麼回事
彈出的資訊視窗一直是最後的那個資訊視窗!折騰了好久,最後終于解決了,具體的代碼如下:
(function (x) {
var point = new bmap.point(jsonobj[x].visit_gps_longitude, jsonobj[x].visit_gps_latitude); // 建立點坐标
title: '<span style="font-size:15px;color:#0a8021">' + jsonobj[x].customername + '</span>' // 資訊視窗标題
var content = "進店時間 " + jsonobj[x].visitbegintime + "<br/>離店時間 " + jsonobj[x].visitendtime;
map.addoverlay(marker);
})(i);
map.addcontrol(new bmap.navigationcontrol());
同樣是一個循環,但是在循環中使用了一個匿名函數,進而造成一個閉包将 i 的值鎖定在裡面,這樣外部的值已經變化,
但是傳到閉包裡面的值已經被保留,也就可以順利拿到應該取到的address[i]的内容了。
這樣雖然解決了問題,但是每添加一個點都會建立一個匿名函數,記憶體洩漏可能會是潛在隐患。
接下去, 我們就可以自由的在地圖上标注點并顯示對應的資訊了!