Vue中百度地图（vue-baidu-map）的使用

1、开始

vue-map-baidu：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
百度地图开发者平台申请密钥详见： http://lbsyun.baidu.com/apiconsole/key */

2、bm-marker和bm-info-window实现定位和定位详情弹窗功能

拾取坐标系统详见：http://api.map.baidu.com/lbsapi/getpoint/index.html

<template>
  <baidu-map
      class="bm-view"
      :center="{lng: 116.383141, lat: 39.913607}"
      zoom="12"
      :scroll-wheel-zoom="true">

    <bm-marker
        v-for="(marker,index) of markers"
        :key="index"
        :position="{lng: marker.lng, lat: marker.lat}"
        @click="lookDetail(marker)"
        :icon="{url: 'http://api0.map.bdimg.com/images/marker_red_sprite.png', size: {width: 100, height: 100}}"
        >

     <bm-info-window
          :title="infoWindow.name"
          :position="{lng: infoWindow.lng, lat: infoWindow.lat}"
          :show="marker.showFlag"
          @close="infoWindowClose(marker)">
      </bm-info-window>
    </bm-marker>


    <!--比例尺控件-->
    <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
    <!--缩放控件-->
    <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

export default {
  name: "Atlas",

  components:{
    BaiduMap,
    BmScale,
    BmNavigation,
    BmMarker,
    BmInfoWindow,
  },

  data(){
    return{
      // 地图标记点
      markers:[
        {
          lng: '116.383141',
          lat: '39.913607',
          name: '信息窗口1',
          showFlag:false
        },

        {
          lng: '116.383141',
          lat: '39.900000',
          name: '信息窗口2',
          showFlag:false
        },
      ],
      infoWindow:{},

      mapStyle: {
        styleJson: [
          {
            "featureType": "all",
            "elementType": "geometry",
            "stylers": {
              "hue": "#007fff",
              "saturation": 89
            }
          },
          {
            "featureType": "water",
            "elementType": "all",
            "stylers": {
              "color": "#ffffff"
            }
          }
        ]
      }
    }
  },

  methods:{
    // 点击点坐标赋值
    lookDetail(marker){
      marker.showFlag = true;
      this.infoWindow = marker;
    },

    // 关闭弹窗
    infoWindowClose(marker) {
      marker.showFlag = false
    },

  }
}
</script>

<style scoped>
.bm-view{
  width: 100%;
  height: 87vh;
}
</style>

其中markers可以是使用vue中的axios从后端获取的坐标信息，也可以是使用vue中的axios从data.json中获取的坐标信息

3、效果