百度地图在VUE项目中插入点位及点位信息弹框

在项目中需要使用地图功能，效果图如下：

具体步骤如下：

1、申请百度地图密钥
2、安装vue-baidu-map
3、在main.js中引入vue-baidu-map.js

import BaiduMap from 'vue-baidu-map'
    Vue.use(BaiduMap, {
    ak: 'ak值'
});

4、template中使用

map
    :zoom="zoom"
    class="baidu-map"
    :map-click="false"
    @ready="handler"
    >
    window
    　　:position="infoWindow.point"
    　　:title="infoWindow.title"
    　　:show="infoWindow.show"
    　　@close="infoWindowClose"
    　　@open="infoWindowOpen"
    >
　　


<mapEchartsCompany
    v-show="companyShow"
    :companyData="companyData"
    @closeShow="closeShow"
/>

5、JS中使用

　　5.1、添加点位及设定地图和弹框属性：

　　5.2、引入地图的方法：

// 地图z主题
    handler({ BMap, map }) {
      mBMap = BMap;
      mMap = map;
      
      map.centerAndZoom(new             BMap.Point(106.757915842,31.8691891592), 5);
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      this.mapFindAllEnterpriseFun()
    },

　　5.3、数据循环并添加点位：

    data.forEach(function(params) {
            const lng = parseFloat(params.longitude)
            const lat = parseFloat(params.latitude)
            if (!isNaN(lng) && !isNaN(lat)) {
              _this.center.lng = lng
              _this.center.lat = lat
              // eslint-disable-next-line no-undef
              const point = new BMap.Point(lng, lat)

              var marker = addMarker(
                point,
                params,
                function() {
                  // 弹框传值
                  _this.companyData = params
                  _this.infoWindowOpen()
                },
              )
              markerLampblackMaps.set(marker)
            }
          })

　　5.4、弹框isShow方法：

    // 弹框打开关闭
    infoWindowClose() {
      this.companyShow = false
    },
    infoWindowOpen() {
      this.companyShow = true
    },
    // 油烟弹框传值
    closeShow(val) {
      this.companyShow = val
    }

数据弹框的代码就不贴了，该传得值传对，自己想做成什么样的都行

整理的有点啰嗦了，希望有帮助~~~