轉(zhuǎn)摘：http://blog.csdn.net/guo_love_peng/article/details/8674230

今天遇到這個(gè)問(wèn)題了。后面再網(wǎng)上搜搜，發(fā)現(xiàn)都是你抄我，我轉(zhuǎn)載你的，后來(lái)無(wú)意看到一篇文章，說(shuō)是用閉包后來(lái)解決了。現(xiàn)在把問(wèn)題解決方法發(fā)出來(lái)

function baiduMapFunction(divId, hotelArray) { var map = new BMap.Map(divId);// 創(chuàng)建百度地圖對(duì)象 map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); map.enableScrollWheelZoom(); // 啟用滾輪放大縮小，默認(rèn)禁用 map.enableContinuousZoom(); // 啟用地圖慣性拖拽，默認(rèn)禁用 map.addControl(new BMap.NavigationControl()); // 添加默認(rèn)縮放平移控件,左上角 map.addControl(new BMap.ScaleControl()); // 添加默認(rèn)比例尺控件 map.addControl(new BMap.MapTypeControl({ anchor : BMAP_ANCHOR_TOP_RIGHT })); // 左上角，默認(rèn)地圖控件 for ( var o in hotelArray) { var point = new BMap.Point(hotelArray[o].lng, hotelArray[o].lat);// 坐標(biāo)點(diǎn) var hotelNameLabel = new BMap.Label(hotelArray[o].hotelName, { offset : new BMap.Size(20, -10) });// 標(biāo)注顯示名稱 var sContent = "<div>" + "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" + hotelArray[o].hotelName + "</h4>" + "<img style='float:right;margin:4px' id='imgDemo' src='../images/" + hotelArray[o].srcImage + "' width='139' height='104' title=''/>" + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + hotelArray[o].hotelAddress + "</p>" + "</div>"; // 設(shè)置label 文本框的樣式 hotelNameLabel.setStyle({ "borderColor" : "red", "color" : "red", "cursor" : "pointer" }); console.log(hotelArray[o].srcImage + sContent); createMark = function(lng, lat, info_html) { var _marker = new BMap.Marker(new BMap.Point(lng, lat)); _marker.addEventListener("click", function(e) { this.openInfoWindow(new BMap.InfoWindow(info_html)); }); _marker.addEventListener("mouseover", function(e) { this.setTitle("位于: " + lng + "," + lat); }); return _marker; }; var marker = createMark(hotelArray[o].lng, hotelArray[o].lat, sContent); map.addOverlay(marker); marker.setLabel(hotelNameLabel); // 添加百度label } city = new BMap.LocalSearch(map, { renderOptions : { map : map, autoViewport : true } }); // 地圖顯示到查詢結(jié)果處 } function searchCity() { var s = $("#searchValue").val(); console.log(s); city.search(s); // 查找城市 }

上面這個(gè)函數(shù)，就接受一個(gè)json數(shù)組對(duì)象，和一個(gè)在你頁(yè)面的divId。因?yàn)橐@示地圖

先把地圖初始化之后，在循環(huán)里面一次從json中讀取數(shù)據(jù)，然后new 出標(biāo)注對(duì)象。再為每個(gè)標(biāo)注對(duì)象添加監(jiān)聽(tīng)方法

在添加監(jiān)聽(tīng)方法的時(shí)候，會(huì)遇到，不管點(diǎn)擊哪一個(gè)標(biāo)注，都是輸出最后一條的信息。

這主要是作用域的問(wèn)題，之后寫了個(gè)閉包的方法。

如下

var createMark = function(lng, lat, info_html) { var _marker = new BMap.Marker(new BMap.Point(lng, lat)); _marker.addEventListener("click", function(e) { this.openInfoWindow(new BMap.InfoWindow(info_html)); }); _marker.addEventListener("mouseover", function(e) { this.setTitle("位于: " + lng + "," + lat); }); return _marker; };

將經(jīng)緯度，和顯示信息單獨(dú)放在函數(shù)里，new標(biāo)注之后，立刻加監(jiān)聽(tīng)。

這樣之后就解決了這個(gè)問(wèn)題了

總結(jié)

以上是生活随笔為你收集整理的关于百度地图 BMap.InfoWindow 只显示最后一条信息解决方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。