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

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');
}