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

最新推荐文章于 2024-07-25 16:02:22 发布

pandaflyup

最新推荐文章于 2024-07-25 16:02:22 发布

阅读量9.8k

点赞数

分类专栏：地图开发文章标签： infowindows 多个marker 显示

本文链接：https://blog.csdn.net/pandaflyup/article/details/8521597

版权

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

摘要由CSDN通过智能技术生成

一、问题：

在使用地图做地图应用的时候碰到这样一个问题，原本是想从数据库中取得一系列的位置（经纬度）信息，在地图上添加标注，同时点击标注能显示窗口信息，但在实际实现的过程中发现无论是百度地图的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