天天看點

地圖開發添加标注物

最近幾年在搞地圖方面的開發,主要是循環為坐标添加标注并為标注添加彈出資訊視窗,起初我的代碼如下:

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]的内容了。

這樣雖然解決了問題,但是每添加一個點都會建立一個匿名函數,記憶體洩漏可能會是潛在隐患。

接下去, 我們就可以自由的在地圖上标注點并顯示對應的資訊了!

繼續閱讀