地图中多个marker时分别显示信息窗口的方法

地图应用:多个marker独立显示信息窗口
在地图开发中,遇到将多个经纬度位置显示为marker并点击弹出相应信息窗口的问题。原有的实现方式导致所有marker共用同一个信息窗口。解决办法是在独立的function中创建infowindow,确保每个marker能显示其特有的信息窗口。
部署运行你感兴趣的模型镜像
一、问题:

        在使用地图做地图应用的时候碰到这样一个问题,原本是想从数据库中取得一系列的位置(经纬度)信息,在地图上添加标注,同时点击标注能显示窗口信息,但在实际实现的过程中发现无论是百度地图的map.openInfoWindow,还是google地图的infowindow.open,在for循环展示信息的时候总是在第一个marker上显示信息窗口。

二、解决方法:(以百度地图举例)

方法一:把infowindow创建写在一个单独的function函数中,这样就能在每个marker上显示自己的infowindow信息。

for(var j=0;j<latlng.length;j++){
             var marker1 = new BMap.Marker(latlng[j],{title:j+"号摄像头"+"("+weidu[j]+","+jingdu[j]+")"});  
             map.addOverlay(marker1);
             var MyIcon=new BMap.Icon(image,new BMap.Size(40, 43));
             marker1.setIcon(MyIcon);
                     
             showinfomessage(marker1,j);//调用显示信息窗口的函数
         }
function showinfomessage(marker,number)
    {
     var opts = {  
              width : 100,     // 信息窗口宽度  
              height: 60,     // 信息窗口高度    
           }  
        var infoWindow = new BMap.InfoWindow(number+"号摄像头", opts);  // 创建信息窗口对象	
        marker.addEventListener("click", function(){
        marker_id=number; 
        map.openInfoWindow(infoWindow, latlng[number]);      // 打开信息窗口 
        });  
    }
方法二:使用双闭包的方式解决;

for(var i=0;i<marker.length;++i){
(function(x){
    marker[x].addEventListner("mouseover",function(){
    this.openInfoWindow(infoWindow[x]);
    });
})(i);
}


您可能感兴趣的与本文相关的镜像

Yolo-v8.3

Yolo-v8.3

Yolo

YOLO(You Only Look Once)是一种流行的物体检测和图像分割模型,由华盛顿大学的Joseph Redmon 和Ali Farhadi 开发。 YOLO 于2015 年推出,因其高速和高精度而广受欢迎

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值