vue使用的是vue2，脚手架是vue-cli3
首先 在public文件夹的index.html中引入百度地图api（需要去官网(jspopularGL | 百度地图API SDK)申请密钥）
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=（密钥）"></script>
这次使用的是1.0版本的webgl 因为要使用自定义样式
然后直接在vue文件中使用
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
export default {
name: "baidu-map",
data() {
return {
map:null
};
},
mounted(){
this.map = new BMapGL.Map('container') //创建一个地图实例
this.map.centerAndZoom(new BMapGL.Point(166.6666,36.6666), 12); //设置坐标点和展示级别
this.map.setMapStyleV2({
styleId:'b3a455df90100869d7f9ed26e438fffe' //样式ID
});
this.map.enableScrollWheelZoom(true) // 允许地图可被鼠标滚轮缩放
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
this.map.addControl(scaleCtrl);
//创建图标
let myIcon = new BMapGL.Icon('图片地址', new BMapGL.Size(51, 60));
// 创建Marker标注，使用图标
let point = new BMapGL.Point('lng的值','lat的值');
let marker = new BMapGL.Marker(point, {
icon: myIcon
});
// 将标注添加到地图
this.map.addOverlay(marker);
// 信息窗口内容----点击图标打开信息窗口
let opts = {
width : 255, // 信息窗口宽度
height: 190, // 信息窗口高度
}
let content=` <div class="alarmDiv">
<div class="imgbj">
<div class="imgtitle">内容</div>
</div>
<p>标题</p>
</div>`;
let infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象
marker.addEventListener("click", () => {
this.map.openInfoWindow(infoWindow, point); //开启信息窗口
});
}
}
</script>
修改信息窗的样式
/*修改地图信息窗口对象样式*/
.BMap_bubble_pop{
background:#001D4F !important;
color:#FFFFFF !important;
border:0 !important;
margin-top:30px;
margin-left: -33px;
}
/*替换剪头*/
img[src="http://webmap0.bdimg.com/image/api/iw_tail.png"]{
opacity:.7;
width: 20px !important;
height: 15px !important;
top:188px !important;
left: 126px !important;
filter:alpha(opacity=70);
content: url('~@/assets/icon/jt.png');
}