Vue 使用百度地圖 實現搜索 定位

要求能定位到國外 及 查看了文檔 百度支持東南亞大部分地區  知足需求 從而使用百度地圖


<template>
  <div class="addHospital">
      <div class="map" v-loading="loading">
        <el-input placeholder="請輸入搜索地址" 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">當前選中：{{mapPointName}}</div>
        <div id="container" style="height: 400px; width: 100%" ref="allmap"></div>
        <div class="map-btn">
          <el-button type="primary" @click="dialogMap = false">確認</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; //獲取第一個智能搜索的結果
              map.centerAndZoom(point, 10);
              marker = new BMap.Marker(point); // 建立標註
              map.addOverlay(marker); // 將標註添加到地圖中
              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("未匹配到地點!可拖動地圖上的紅色圖標到精確位置");
            }
          } else {
            alert("未找到搜索結果");
          }
        }
      });
      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 }
          );
          //鼠標點擊
          map.addEventListener("click", function(e) {
            console.log(e);
            var pt = e.point;
            var marker = new BMap.Marker(pt); // 建立標註
            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>