百度地图添加多个marker,给marker添加多个信息窗口_js 百度地图给多个marker添加文本信息-CSDN博客

本文链接：https://blog.csdn.net/user_set/article/details/56667854

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

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

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

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

直接贴代码:

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;