最近在做一个大屏相关的页面，其中有一块是地图展示，并且要求实现点击地图上面的点位弹出弹窗展示对应的内容，看完需求后的我就像在瓜猹里找不到瓜的猹，完全找不到方向下手，好在在看了几个小时的百度mapApi后，也是成功将需求实现了。下面附上实现过程以及核心代码。

1.首先要安装百度map并且在main.js引入并全局注册

 npm install vue-baidu-map --save

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
    
    
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

2.组件内使用

直接上实例代码

<template>
  <div class="overview">
    <!--地图-->
    <div class="mapStyle">
      <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
        <bml-marker-clusterer :averageCenter="true">
          <div v-for="(marker, i) of markers" :key="i">
            <bm-marker :dragging="false" :icon="{ url: marker.url, size: { width: 40, height: 40 } }"
              :position="{ lng: marker.lng, lat: marker.lat }" @click="infoWindowOpen(marker)">
              <bm-info-window v-if="marker.flag=='M站'" :position="{ lng: marker.lng, lat: marker.lat }"
                :show="marker.showFlag" @close="infoWindowClose(marker)">
                <p>m站名称 : {
    
    {
    
     marker.mzwxjgmc}}</p>
              </bm-info-window>
              <bm-info-window v-if="marker.flag=='I站'" :position="{ lng: marker.lng, lat: marker.lat }"
                :show="marker.showFlag" @close="infoWindowClose(marker)">
                <p>i站名称 : {
    
    {
    
     marker.izjcjgmc }}</p>
              </bm-info-window>
            </bm-marker>
          </div>
        </bml-marker-clusterer>
      </baidu-map>
    </div>
  </div>
</template>

<script>
  import {
    
    
    jgdwfb,
  } from '@api/screen'
  // 按需引入点聚合
  import {
    
    
    BmlMarkerClusterer
  } from 'vue-baidu-map';
  // 引入marker
  import BmMarker from 'vue-baidu-map/components/overlays/Marker';

  export default {
    
    
    //注册组件
    components: {
    
    
      BmlMarkerClusterer,
      BmMarker
    },
    data() {
    
    
      const markers = []; //声明一个空数组用来push
      return {
    
    
        show: false, //默认不展示
        center: {
    
     //经纬度
          lng: "",
          lat: ""
        },
        zoom: 13,//地图的视野
        markers,//地图轮廓的方法
        BMap: '',//地图轮廓的方法
        maps: [],//定义一个数组用来赋值接口的数据
      }
    },
    methods: {
    
    
      //地图方法
      handler({
    
    BMap,map}) {
    
    
        this.markers = [];//每次执行地图方法清空markers数组
        map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
        let mapStyle = {
    
    
          style: "midnight"
        } //地图背景色
        map.setMapStyle(mapStyle);//生成地图背景色
        //请求接口
        jgdwfb({
    
    }).then(res => {
    
    
          this.$nextTick(() => {
    
    
            //赋值
            this.maps = res.data;
            this.zoom = 13;//地图的视野
            //循环拿到flag的值
            for (let i = 0; i < this.maps.length; i++) {
    
    
              // 判断flag的值渲染经纬度
              if (this.maps[i].flag == 'M站') {
    
    
                this.center.lat = res.data[i].wd;
                this.center.lng = res.data[i].jd;
                //赋值操作
                let position = {
    
    
                  lng: this.maps[i].jd,
                  lat: this.maps[i].wd,
                  url: require('../../assets/platform/dakou.png'),
                  showFlag: false,
                  mzwxjgmc: this.maps[i].mzwxjgmc,
                  flag: this.maps[i].flag,
                  pfjd: this.maps[i].pfjd,
                  jxlb: this.maps[i].jxlb,
                  lxdh: this.maps[i].lxdh,
                  gzztStr: this.maps[i].gzztStr,
                };
                this.markers.push(position); //添加到markers数组中
              }
              // 判断flag的值渲染经纬度
              if (this.maps[i].flag == 'I站') {
    
    
                //赋值操作
                this.center.lat = res.data[i].wd;
                this.center.lng = res.data[i].jd;
                let position = {
    
    
                  lng: this.maps[i].jd,
                  lat: this.maps[i].wd,
                  url: require('../../assets/platform/xiucheg.png'),
                  showFlag: false,
                  ssqx: this.maps[i].ssqx,
                  fzr: this.maps[i].fzr,
                  lxdh: this.maps[i].lxdh,
                  flag: this.maps[i].flag,
                  izjcjgmc: this.maps[i].izjcjgmc
                };
                this.markers.push(position); //添加到markers数组中
              }
            }
          })
        })
        //地图轮廓的一个方法
        this.BMap = BMap;
        this.map = map;
        map.centerAndZoom('黄山市', 10);
        let bdary = new BMap.Boundary();
        bdary.get('黄山市', function (res) {
    
    
          for (let i = 0; i < res.boundaries.length; i++) {
    
    
            var ply = new BMap.Polygon(res.boundaries[i], {
    
    
              strokeWeight: 4,
              strokeOpacity: 1,
              strokeStyle: 'line',
              strokeColor: '#ff0000'
            });
            map.addOverlay(ply);
            ply.setFillColor('none');
          }
        });
      },
    }
  }
</script>
<style scoped>
  .map {
    
    
    width: 600px;
    height: 500px;
  }
</style>

展示效果