百度地图在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中使用

<baidu-map
    :zoom="zoom"
    class="baidu-map"
    :map-click="false"
    @ready="handler"
    >
    <bm-info-window
    　　:position="infoWindow.point"
    　　:title="infoWindow.title"
    　　:show="infoWindow.show"
    　　@close="infoWindowClose"
    　　@open="infoWindowOpen"
    >
　　</bm-info-window>
</baidu-map>
<!-- 地图弹框 -->
<mapEchartsCompany
    v-show="companyShow"
    :companyData="companyData"
    @closeShow="closeShow"
/>

 

5、JS中使用

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

<script>
    import map_off from "@/assets/img/map/map_off.png";
    import map_on from "@/assets/img/map/map_on.png";

    var mMap; // 地图容器
    var mBMap; // 地图类
    const markerLampblackMaps = new Map();

    var labelIsShow = true;
    /**
     * 添加Marker
    */
    var addMarker = function (point, item, fun) {
    var off = map_off
    var on = map_on

    var myIcon = new BMap.Icon(on, new BMap.Size(32, 32), {
        anchor: new BMap.Size(10, 25),
    });

    if (item.status == '正常') {
        myIcon = new BMap.Icon(off, new BMap.Size(32, 32), {
            anchor: new BMap.Size(10, 25),
        });
    } else {
        myIcon = new BMap.Icon(on, new BMap.Size(32, 32), {
            anchor: new BMap.Size(10, 25),
        });
    }

var marker = new mBMap.Marker(point, { icon: myIcon });
    var label;

    if (item.name) {
        label = new mBMap.Label(item.name, {
            offset: new mBMap.Size(25, -10)
        })
    }

    label.addEventListener('click', fun)

    if (labelIsShow) {
        marker.setLabel(label)
    }

    marker.addEventListener('click', fun)

    mMap.addOverlay(marker)
    return marker
};
export default {
    components: { mapEchartsCompany }, // 弹框组件
    data() {
        return {
            infoWindow: {
                point: {
                    lng: '',
                    lat: ''
                },
                title: "",
               show: false,
            },
        companyData: {}, // 弹框数据
        companyShow: false
    };
},
</script>                    

 

　　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
    }

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

 

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