百度地图添加多个marker,给marker添加多个信息窗口

本文介绍了如何使用百度地图API动态添加多个marker,并为每个marker设置信息窗口,展示不同的订单信息。在点击marker时,信息窗口会显示对应的订单编号和地址。示例代码展示了如何通过循环遍历获取的坐标和地址数据来实现这一功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

              关于之前开发百度地图api的问题, 

从服务端获取数据, 获取数据中的坐标信息, 循环添加marker,  每次点击的marker的时候,    会显示窗口,   窗口显示marker的信息,   之前有人说点击的都是最后一个, 内容没有改变

直接贴代码:

      <script type="text/javascript">


var map = new BMap.Map("container"); \
var point = new BMap.Point(121.47, 31.23); \
map.centerAndZoom(point, 8); \
map.enableScrollWheelZoom();\
map.addControl(new BMap.NavigationControl()); \
map.addControl(new BMap.MapTypeControl()); \
map.addControl(new BMap.ScaleControl()); \
map.addControl(new BMap.OverviewMapControl()); \


//根据坐标去显示位置信息
$(document).ready(function () {
debugger;
var markerArr = [];
var poinlist = document.getElementsByName("poin");
var Addrelist = document.getElementsByName("orderAddre");
var obj={};
for (var i = 0, j = poinlist.length; i < j; i++){
   for (var i = 0, b = Addrelist.length; i < b; i++){
     lng=(poinlist[i].value).split(",")[0];
     lat=(poinlist[i].value).split(",")[1];
     var obj=[lng,lat,"地址:"+Addrelist[i].value];
     markerArr.push(obj);
   };
};


  for(var i=0;i<markerArr.length;i++){
(function (x) {  
var marker = new BMap.Marker(new BMap.Point(markerArr[x][0],markerArr[x][1]));  \
var order = (markerArr[x][2]).split("/")[0];
var addres = (markerArr[x][2]).split("/")[1];
map.addOverlay(marker);               \
//addClickHandler(content,marker);
var opts = {
 width : 150,     
 height: 100,     
 title : "订单信息" , 
 enableMessage:true,
       };
//marker.setAnimation(BMAP_ANIMATION_BOUNCE);  
        var content = "订单编号 " + order + "<br/>订单地址 " + addres;  
        var info_Window = new BMap.InfoWindow(content, opts); \
        marker.addEventListener("click", function () {  
            this.openInfoWindow(info_Window);  
        });  
        map.addOverlay(marker); 
})(i);  
}
map.addControl(new BMap.NavigationControl());  
    });


    //异步调用百度js
    function map_load() {  
        var load = document.createElement("script");  
        load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";  
        document.body.appendChild(load);  
    }  
    window.onload = map_load; 



我这边是一个订单列表,   有订单编号+订单的具体地址

进到页面自动调用函数 添加所有的marker

起初也是通过将坐标 地址获取到,添加到一个数组中,   循环数组添加marker

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值