VUE 解决百度地图循环加载marker并添加多个信息窗口,解决只显示最后一个窗口信息的问题
循环添加的标注点只显示最后一个信息baiduMap() {var bmap = new BMapGL.Map("allmap");// 创建Map实例bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17);// 初始化地图,设置中心点坐标和地图级别bmap.enableScrollWheelZoom(true);// 开启鼠标
·
循环添加的标注点只显示最后一个信息
baiduMap() {
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图,设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var path = [{
'lng': 116.297611,
'lat': 40.047363,
'speed':52,
'miles':40,
'time':'2021/5/27 8:00:00',
}, {
'lng': 116.302839,
'lat': 40.048219,
'speed':11,
'miles':2,
'time':'2021/5/27 8:00:00',
}, {
'lng': 116.308301,
'lat': 40.050566,
'speed':42,
'miles':30,
'time':'2021/5/27 8:00:00',
}, {
'lng': 116.305732,
'lat': 40.054957,
'speed':102,
'miles':55,
'time':'2021/5/27 8:00:00',
}, {
'lng': 116.304754,
'lat': 40.057953,
'speed':32,
'miles':40,
'time':'2021/5/27 8:00:00',
}, {
'lng': 116.306487,
'lat': 40.058312,
'speed':'1',
'miles':'2',
'time':'2021/5/27 8:00:00',
}, {
'lng': 116.307223,
'lat': 40.056379,
'speed':'92',
'miles':'32',
'time':'2021/5/27 8:00:00',
}];
var point = [];
// path.forEach(function(item){
// var poi = new BMapGL.Point(item.lng, item.lat);
// point.push(poi);
// var marker = new BMapGL.Marker(poi); //创建标注
// var opts = {
// width : 200, // 信息窗口宽度
// height: 70, // 信息窗口高度
// title : "车辆行使信息" , // 信息窗口标题
// }
// var sContent = `<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>速度:`+item.speed+`</p>`+`<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>里程:`+item.miles+`</p>`+`<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em;'>时间:`+item.time+`</p>`;
// var infoWindow = new BMapGL.InfoWindow(sContent,opts);
// marker.addEventListener('click', function () {
// this.openInfoWindow(infoWindow);
// });
// bmap.addOverlay(marker); //将标注添加到地图中
// })
for (let i = 0; i < path.length; i++) {
var poi = new BMapGL.Point(path[i].lng, path[i].lat);
point.push(poi);
var marker = new BMapGL.Marker(poi); //创建标注
var opts = {
width : 200, // 信息窗口宽度
height: 70, // 信息窗口高度
title : "车辆行使信息" , // 信息窗口标题
}
var sContent = `<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>速度:`+path[i].speed+`</p>`+`<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>里程:`+path[i].miles+`</p>`+`<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em;'>时间:`+path[i].time+`</p>`;
var infoWindow = new BMapGL.InfoWindow(sContent,opts);
marker.addEventListener('click', function () {
this.openInfoWindow(infoWindow);
});
bmap.addOverlay(marker); //将标注添加到地图中
}
var pl = new BMapGL.Polyline(point,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
this.maps = bmap
this.pls = pl
setTimeout(this.start, 3000);
},
start(){
var trackAni = new BMapGLLib.TrackAnimation(this.maps, this.pls, {
overallView: true,
tilt: 30,
duration: 500,
delay: 40
});
trackAni.start();
},
只需要更改循环的方式,用forEach循环即可
更多推荐
已为社区贡献9条内容
所有评论(0)