配置解析：https://www.cnblogs.com/Marco-hui/p/12155995.html

//配置文件

/**
 * 動(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)
    })
  }

//要求能定位到國外 及 查看了文檔 百度支持東南亞大部分地區(qū)  滿足需求 從而使用百度地圖<template>
  <div class="addHospital">
      <div class="map" v-loading="loading">
        <el-input placeholder="請(qǐng)輸入搜索地址" v-model="mapName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="mapNameChange"></el-button>
        </el-input>
        <div style="padding:10px 0;" v-if="mapPointName">當(dāng)前選中：{{mapPointName}}</div>
        <div id="container" style="height: 400px; width: 100%" ref="allmap"></div>
        <div class="map-btn">
          <el-button type="primary" @click="dialogMap = false">確認(rèn)</el-button>
        </div>
      </div>
  </div>
</template>

<script>
let map = null,
  geoc = null;
export default {
  name: "addHospital",
  data() {
    return {
      dialogMap: false,
      mapName: "",
      mapPointName: "",
      loading:true,
      mapGetshow: true,
      dialogName: ""
    };
  },
  created() {this.mapBuild()},
  methods: {
    //搜索地圖
    mapNameChange() {
      let that = this,
        point,
        marker = null;
      let local = new BMap.LocalSearch(map, {
        renderOptions: { map: map },
        onSearchComplete: res => {
          if (local.getResults() != undefined) {
            map.clearOverlays(); //清除地圖上所有覆蓋物
            if (local.getResults().getPoi(0)) {
              point = local.getResults().getPoi(0).point; //獲取第一個(gè)智能搜索的結(jié)果
              map.centerAndZoom(point, 10);
              marker = new BMap.Marker(point); // 創(chuàng)建標(biāo)注
              map.addOverlay(marker); // 將標(biāo)注添加到地圖中
              marker.enableDragging(); // 可拖拽
              geoc.getLocation(point, function(rs) {
                var addComp = rs.addressComponents;
                console.log(addComp);
                that.mapPointName =
                  addComp.province +
                  ", " +
                  addComp.city +
                  ", " +
                  addComp.district +
                  ", " +
                  addComp.street +
                  ", " +
                  addComp.streetNumber;
                  
              });
            } else {
              alert("未匹配到地點(diǎn)!可拖動(dòng)地圖上的紅色圖標(biāo)到精確位置");
            }
          } else {
            alert("未找到搜索結(jié)果");
          }
        }
      });
      local.search(this.mapName);
    },
    //地圖顯示
    mapBuild() {
      let that = this;
      this.dialogMap = !this.dialogMap;
      setTimeout(function() {
        if (that.mapGetshow) {
          map = new BMap.Map("container");
          geoc = new BMap.Geocoder();
          let point = new BMap.Point(116.3964, 39.9093);
          map.centerAndZoom(point, 10);
          map.enableScrollWheelZoom();
          var geolocation = new BMap.Geolocation();
          //定位
          geolocation.getCurrentPosition(
            r => {
              console.log(r);
              var mk = new BMap.Marker(r.point);
              map.addOverlay(mk);
              map.panTo(r.point);
              geoc.getLocation(r.point, function(rs) {
                var addComp = rs.addressComponents;
                console.log(addComp);
                that.mapPointName =
                  addComp.province +
                  addComp.city +
                  addComp.district +
                  addComp.street +
                  addComp.streetNumber;
                  that.loading = false;
                that.mapGetshow = false;
              });
            },
            { enableHighAccuracy: true }
          );
          //鼠標(biāo)點(diǎn)擊
          map.addEventListener("click", function(e) {
            console.log(e);
            var pt = e.point;
            var marker = new BMap.Marker(pt); // 創(chuàng)建標(biāo)注
            map.clearOverlays();
            map.addOverlay(marker);
            geoc.getLocation(pt, function(rs) {
              var addComp = rs.addressComponents;
              console.log(addComp);
              that.mapPointName =
                addComp.province +
                addComp.city +
                addComp.district +
                addComp.street +
                addComp.streetNumber;
            });
          });
        }
      }, 1000);
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../filters/css/all.css";
.addHospital {
  width: 100%;
  height: 100%;
  .map {
    padding: 10px;
    .input-with-select {
    }
    .map-btn {
      padding: 10px 20px;
      margin: auto;
      text-align: right;
      button {
        padding: 12px 30px;
      }
    }
  }
}
</style>