1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 关于百度地图 BMap.InfoWindow 只显示最后一条信息解决方法

关于百度地图 BMap.InfoWindow 只显示最后一条信息解决方法

时间:2023-02-01 04:06:54

相关推荐

关于百度地图 BMap.InfoWindow 只显示最后一条信息解决方法

转摘:/guo_love_peng/article/details/8674230

今天遇到这个问题了。后面再网上搜搜,发现都是你抄我,我转载你的,后来无意看到一篇文章,说是用闭包后来解决了。现在把问题解决方法发出来

function baiduMapFunction(divId, hotelArray) { var map = new BMap.Map(divId);// 创建百度地图对象 map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); map.enableScrollWheelZoom(); // 启用滚轮放大缩小,默认禁用 map.enableContinuousZoom(); // 启用地图惯性拖拽,默认禁用 map.addControl(new BMap.NavigationControl()); // 添加默认缩放平移控件,左上角 map.addControl(new BMap.ScaleControl()); // 添加默认比例尺控件 map.addControl(new BMap.MapTypeControl({ anchor : BMAP_ANCHOR_TOP_RIGHT })); // 左上角,默认地图控件 for ( var o in hotelArray) { var point = new BMap.Point(hotelArray[o].lng, hotelArray[o].lat);// 坐标点 var hotelNameLabel = new BMap.Label(hotelArray[o].hotelName, { offset : new BMap.Size(20, -10) });// 标注显示名称 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>"; // 设置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 } }); // 地图显示到查询结果处 } function searchCity() { var s = $("#searchValue").val(); console.log(s); city.search(s); // 查找城市 }

上面这个函数,就接受一个json数组对象,和一个在你页面的divId。因为要显示地图

先把地图初始化之后,在循环里面一次从json中读取数据,然后new 出标注对象。再为每个标注对象添加监听方法

在添加监听方法的时候,会遇到,不管点击哪一个标注,都是输出最后一条的信息。

这主要是作用域的问题,之后写了个闭包的方法。

如下

varcreateMark = 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; };

将经纬度,和显示信息单独放在函数里,new标注之后,立刻加监听。

这样之后就解决了这个问题了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。