<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>

entry: {
  app: ['babel-polyfill', './src/main.js']
},
externals: {
  BMap: 'BMap'
}

import BMap from 'BMap'

/**
 * 動(dòng)態(tài)加載百度地圖api函數(shù)
 * @param {String} ak  百度地圖AK，必傳
 */
export default function loadBMap(ak) {
  return new Promise(function(resolve, reject) {
    if (typeof window.BMap !== 'undefined') {
      resolve(window.BMap)
      return true
    }
    window.onBMapCallback = function() {
      resolve(window.BMap)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src =
      'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

import loadBMap from '@/<js資源文件夾>/loadBMap.js'

//這里運(yùn)用async/await 進(jìn)行異步處理，保證BMap加載進(jìn)來(lái)后才執(zhí)行后面的操作
async mounted() {
  await loadBMap('您的密鑰') //加載引入BMap
  ...
}

<div id="map-container" style="width:100%;height:500px;"></div>

data() {
  return {
    form: {
      address: '', //詳細(xì)地址
      addrPoint: { //詳細(xì)地址經(jīng)緯度
        lng: 0,
        lat: 0
      }
    },
    map: '', //地圖實(shí)例
    mk: '' //Marker實(shí)例
  }
}

methods: {
  initMap() {
    var that = this;
    this.map = new BMap.Map("map-container", {enableMapClick:false})  //新建地圖實(shí)例，enableMapClick:false ：禁用地圖默認(rèn)點(diǎn)擊彈框
    var point = new BMap.Point(113.30765,23.12005);
    this.map.centerAndZoom(point,19)
  }
},
mounted() {
  this.initMap()
}

/**
 * 逆地址解析函數(shù)（根據(jù)坐標(biāo)點(diǎn)獲取詳細(xì)地址）
 * @param {Object} point   百度地圖坐標(biāo)點(diǎn)，必傳
 */
getAddrByPoint(point){
  var that = this;
  var geco = new BMap.Geocoder();
  geco.getLocation(point, function(res){
  	console.log(res)  //內(nèi)容見下圖
    that.mk.setPosition(point) //重新設(shè)置標(biāo)注的地理坐標(biāo)
    that.map.panTo(point)  //將地圖的中心點(diǎn)更改為給定的點(diǎn)
    that.form.address = res.address;  //記錄該點(diǎn)的詳細(xì)地址信息
    that.form.addrPoint = point;  //記錄當(dāng)前坐標(biāo)點(diǎn)
  })
}

initMap() {
  ...
  this.mk = new BMap.Marker(point,{enableDragging:true}) //創(chuàng)建一個(gè)圖像標(biāo)注實(shí)例，enableDragging：是否啟用拖拽，默認(rèn)為false
  this.map.addOverlay(this.mk) //將覆蓋物添加到地圖中
}

initMap() {
  ...
  this.mk.addEventListener('dragend', function(e){
    that.getAddrByPoint(e.point) //拖拽結(jié)束后調(diào)用逆地址解析函數(shù)，e.point為拖拽后的地理坐標(biāo)
  })
}

initMap() {
  ...
  var navigationControl = new BMap.NavigationControl({ //創(chuàng)建一個(gè)特定樣式的地圖平移縮放控件
    anchor: BMAP_ANCHOR_TOP_RIGHT, //靠右上角位置
    type: BMAP_NAVIGATION_CONTROL_SMALL //SMALL控件類型
  })
  this.map.addControl(navigationControl ) //將控件添加到地圖
}

initMap() {
  ...
  var geolocationControl = new BMap.GeolocationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}) //創(chuàng)建一個(gè)地圖定位控件
  geolocationControl.addEventListener("locationSuccess", function(e){ //綁定定位成功后事件
    that.getAddrByPoint(e.point) //定位成功后調(diào)用逆地址解析函數(shù)
  });
  geolocationControl.addEventListener("locationError",function(e){ //綁定定位失敗后事件
    alert(e.message);
  });
  this.map.addControl(geolocationControl) //將控件添加到地圖
}

/**
 * 瀏覽器定位函數(shù)
 */
geolocation() {
  var that = this;
  var geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(function(res){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
      that.getAddrByPoint(res.point) //當(dāng)成功時(shí)，調(diào)用逆地址解析函數(shù)
    } else {
      alert('failed'+this.getStatus()); //失敗時(shí)，彈出失敗狀態(tài)碼
    }        
  },{enableHighAccuracy: true}) //enableHighAccuracy：是否要求瀏覽器獲取最佳效果，默認(rèn)為false
}

initMap() {
  ...
  this.geolocation()
}

initMap() {
  ...
  this.map.addEventListener('click', function(e){ //給地圖綁定點(diǎn)擊事件
    that.getAddrByPoint(e.point) //點(diǎn)擊后調(diào)用逆地址解析函數(shù)
  })
}

<el-autocomplete
  style="width:100%;"
  popper-class="autoAddressClass"
  v-model="form.address"
  :fetch-suggestions="querySearchAsync"
  :trigger-on-focus="false"
  placeholder="詳細(xì)地址"
  @select="handleSelect"
  clearable>
  <template slot-scope="{ item }">
    <i class="el-icon-search fl mgr10"></i>
    <div style="overflow:hidden;">
      <div class="title">{{ item.title }}</div>
      <span class="address ellipsis">{{ item.address }}</span>
    </div>
  </template>
</el-autocomplete>

querySearchAsync(str,cb){
  var options = {
    onSearchComplete: function(res){ //檢索完成后的回調(diào)函數(shù)
      var s = [];
      if (local.getStatus() == BMAP_STATUS_SUCCESS){
        for (var i = 0; i < res.getCurrentNumPois(); i ++){
          s.push(res.getPoi(i));
        }
        cb(s) //獲取到數(shù)據(jù)時(shí)，通過(guò)回調(diào)函數(shù)cb返回到<el-autocomplete>組件中進(jìn)行顯示
      } else{
        cb(s)
      }
    }
  }
  var local = new BMap.LocalSearch(this.map, options) //創(chuàng)建LocalSearch構(gòu)造函數(shù)
  local.search(str) //調(diào)用search方法，根據(jù)檢索詞str發(fā)起檢索
}

handleSelect(item) {
  this.form.address = item.address + item.title; //記錄詳細(xì)地址，含建筑物名
  this.form.addrPoint = item.point; //記錄當(dāng)前選中地址坐標(biāo)
  this.map.clearOverlays() //清除地圖上所有覆蓋物
  this.mk = new BMap.Marker(item.point) //根據(jù)所選坐標(biāo)重新創(chuàng)建Marker
  this.map.addOverlay(this.mk) //將覆蓋物重新添加到地圖中
  this.map.panTo(item.point) //將地圖的中心點(diǎn)更改為選定坐標(biāo)點(diǎn)
}

.autoAddressClass{
  li {
    i.el-icon-search {margin-top:11px;}
    .mgr10 {margin-right: 10px;}
    .title {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .address {
      line-height: 1;
      font-size: 12px;
      color: #b4b4b4;
      margin-bottom: 5px;
    }
  }
}