vue 使用百度地图（marker，infowindow)

地图（marker，infowindow)"/>

vue 使用百度地图（marker，infowindow)

vue使用的是vue2，脚手架是vue-cli3

首先 在public文件夹的index.html中引入百度地图api（需要去官网(jspopularGL | 百度地图API SDK)申请密钥）

<script type="text/javascript" src="=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=".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');
}