需求：在vue項目中通過點擊按鈕，彈出百度地圖的彈框，用戶選擇地圖上的點或者通過搜索關鍵字選點，點擊確認 關閉彈窗 得到經緯度

效果：

vue baidu map api鏈接 : https://dafrok.github.io/vue-baidu-map/#/zh/index

使用之前需要先申請百度服務密鑰

由於要多次用到地圖選點，故封裝成一個簡單的組件，在需要的地方進行引入，彈窗用的是iview的modal，本例中用的是局部引入vue baidu map

在需要的地方引入組件

eg: <mapComponent v-model="showMapComponent" v-on:cancel="cancelMap" v-on:map-confirm="confirmMap"></mapComponent>

confirmMap中得到回傳數據，當然，可根據實際需要回傳需要的數據，這裏只回傳了經緯度

附：源代碼

<!--
使用說明:
   v-on:  map-confirm,參數為array數組,傳遞經緯度值
   v-on   cancel    取消時發出事件
-->
<template>
  <div style="padding-top:50px; border:1px solid red">
    <Modal @on-cancel="cancel" v-model="showMapComponent" width="800" :closable
 
="false" :mask-closable="false">
      <baidu-map v-bind:style="mapStyle" class="bm-view" ak="你的密鑰"
      :center="center" 
      :zoom="zoom" 
      :scroll-wheel-zoom="true" 
      @click="getClickInfo"
      @moving="syncCenterAndZoom" 
      @moveend="syncCenterAndZoom" 
      @zoomend="syncCenterAndZoom"
 
>
        <bm-view style="width: 100%; height:500px;"></bm-view>
        <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
        </bm-marker>
        <bm-control :offset="{width: ‘10px‘, height: ‘10px‘}">
          <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
            <input type="text" placeholder="請輸入搜索關鍵字" class="serachinput">
          </bm-auto-complete>
        </bm-control>
        <bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
      </baidu-map>
      <div slot="footer" style="margin-top: 0px;">
        <Button @click="cancel" type="ghost"
                style="width: 60px;height: 36px;">取消
        </Button>
        <Button type="primary" style="width: 60px;height: 36px;" @click="confirm">確定</Button>
      </div>
    </Modal>
  </div>  
</template>
<script>
  import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker} from ‘vue-baidu-map‘
  export default {
    components: {
      BaiduMap,
      BmControl,
      BmView,
      BmAutoComplete,
      BmLocalSearch,
      BmMarker
    },
    data: function () {
      return {
        showMapComponent: this.value,
        keyword: ‘‘,
        mapStyle: {
          width: ‘100%‘,
          height: this.mapHeight + ‘px‘
        },
        center: {lng: 116.404, lat: 39.915},
        zoom: 15
      }
    },
    watch: {
      value: function (currentValue) {
        this.showMapComponent = currentValue
        if (currentValue) {
          this.keyword = ‘‘
        }
      }
    },
    props: {
      value: Boolean,
      mapHeight: {
        type: Number,
        default: 500
      }
    },
    methods: {
      /***
       * 地圖點擊事件。
       */
      getClickInfo (e) {
        this.center.lng = e.point.lng
        this.center.lat = e.point.lat
      },
      syncCenterAndZoom (e) {
        const {lng, lat} = e.target.getCenter()
        this.center.lng = lng
        this.center.lat = lat
        this.zoom = e.target.getZoom()
      },
      /***
       * 確認
       */
      confirm: function () {
        this.showMapComponent = false
        this.$emit(‘map-confirm‘, this.center)
      },
      /***
       * 取消
       */
      cancel: function () {
        this.showMapComponent = false
        this.$emit(‘cancel‘, this.showMapComponent)
      }
    }
  }
</script>
 
<style scoped>
.serachinput{
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
}
</style>

vue baidu map之獲取選中點的經緯度