一、 引用
npm install vue-baidu-map --save
index.html
<script src='http://api.map.baidu.com/api?v=3.0&ak='></script>
初始化
<div class="map-container" ref="bmap" id="bmap"></div>
initBMap () {
this.bmap = new BMap.Map("bmap", {
mapType: BMAP_SATELLITE_MAP
});
//设置中心点和缩放比例
this.bmap.centerAndZoom(new BMap.Point(121.407142, 37.602942), 17);
// 开启鼠标滚轮缩放
this.bmap.enableScrollWheelZoom();
},
二、折线增加方向箭头
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
scale: 0.5,
strokeColor: '#fff',
strokeWeight: '2'
});
var icons = new BMap.IconSequence(sy, '10', '30');
let polyline = new BMap.Polyline(points, {
strokeColor: '#28FF28',
strokeWeight: 6,
strokeOpacity: 1,
icons: [icons]
});
this.bmap.addOverlay(polyline);
三、地图初始化时折线不显示
猜测原因:地图为加载完全即开始绘制折线
解决方案:1.延迟绘制 2.地图加载完成后绘制折线(没找到判断地图是否加载完成的方法)
setTimeout(() => {
this.bmap.addOverlay(polyline);
},700);
四、infowindow上添加自定义点击事件
参考:https://blog.csdn.net/qq_41588568/article/details/91552752
// 生成信息窗体
createInfowindow(o, point) {
this.baiduWindow = new BMap.InfoWindow(this.createInfoWindowCode(o, point), {
width: 0,
height: 0
});
let _this = this;
//监听打开弹窗事件,打开弹窗时为按钮绑定点击事件
this.baiduWindow.addEventListener("open",function(){
document.getElementById("operationBtn").onclick = function(){
_this.getDevicePath();
}
})
return this.baiduWindow;
},
// 生成信息窗体HTML代码
createInfoWindowCode(o, p) {
var content = '';
content += '<div id="operationBtn" style="text-align:right;"><a style="text-decoration:none;"> >>>查询轨迹</a></div>';
return content;
},
五、添加文字标签、标点
// 添加文字标签
let point = new BMap.Point(item.longitude, item.latitude);
let offset = new BMap.Size(-22, -50);
let label = new BMap.Label('label名称', { position: point, offset: offset });
label.setStyle({
borderColor: '#ff0000',
backgroundColor: '#ff0000',
color: '#fff'
});
this.bmap.addOverlay(label);
//添加标点
let point = new BMap.Point(item.longitude, item.latitude);
let marker = new BMap.Marker(point, { icon: icon });
marker.disableDragging();//关闭标注拖拽功能
this.bmap.addOverlay(marker);