Vue接入高德地圖2020最新完整版帶搜索框及單擊獲取經緯度事件

Vue接入高德地圖

1.安裝

npm install vue-amap --save

2.引入資源

在主文件,main.js中填寫如下配置

import VueAMap from 'vue-amap' // 引入高德地圖
// 高德地圖初始化
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '您的高德地圖KEY', // 如果沒有這個key請去高德地圖開放平臺申請
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMap.Geocoder', 'AMap.AMapManager', 'AMap.Marker'],
  v: '1.4.4'
})

高德地圖開放平臺https://lbs.amap.com/

登錄以後進入控制檯->

這裏必須填Web端的KEY 也就是支持JavaScript的

3.編寫代碼(三板斧！):

3.1全局變量

data(){
    return{
        // 高德地圖
            longitudeAndlatitude: 0,// 高德地圖經緯度
            // amaplon: 0,
            // amaplat: 0,
            AMapAddress: '',// 高德地圖定位位置
            center: [116.404, 39.915],
            lng: 0,
            lat: 0,
            loaded: false,
            plugin: [{
              enableHighAccuracy: true,//是否使用高精度定位，默認:true
              timeout: 100,            //超過10秒後停止定位，默認：無窮大
              maximumAge: 0,           //定位結果緩存0毫秒，默認：0
              convert: true,           //自動偏移座標，偏移後的座標爲高德座標，默認：true
              showButton: true,        //顯示定位按鈕，默認：true
              buttonPosition: 'RB',    //定位按鈕停靠位置，默認：'LB'，左下角
              showMarker: true,        //定位成功後在定位到的位置顯示點標記，默認：true
              showCircle: true,        //定位成功後用圓圈表示定位精度範圍，默認：true
              panToLocation: true,     //定位成功後將定位到的位置作爲地圖中心點，默認：true
              zoomToAccuracy:true,     //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，默認：f
              extensions:'all',
              pName: 'Geolocation',
              events: {
                init(o) {
                  // o 是高德地圖定位插件實例
                  o.getCurrentPosition((status, result) => {
                    console.log(result)
                    if (result && result.position) {
                      self.lng = result.position.lng;
                      self.lat = result.position.lat;
                      self.center = [self.lng, self.lat];
                      self.loaded = true;
                      self.$nextTick();
                    }
                  });
                },
                click(e) {
                  let { lng, lat } = e.lnglat;
                  self.lng = lng;
                  self.lat = lat;

                  // 這裏通過高德 SDK 完成。
                  var geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                  });        
                  geocoder.getAddress([lng ,lat], function(status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                      if (result && result.regeocode) {
                        self.address = result.regeocode.formattedAddress;
                        self.$nextTick();
                      }
                    }
                  });
                }
              }
            }],
            events: {
                init(o) {
                  console.log("初始化高德地圖1")
                },
                click(e) {
                  self.longitude = e.lnglat.lng;
                  self.latitude = e.lnglat.lat;
                  let lonAndlat = self.longitude+","+self.latitude;
                  console.log(self.longitude+","+self.latitude)
                  self.$message("正在計算區域名稱")
                  getAMapAddressByLocation(lonAndlat).then(response=>{
                    self.AMapAddress = response.data.data;
                    self.$message.success("當前地址爲:"+self.AMapAddress)
                  })
                }
              },
              // 高德地圖搜索需要
              markers: [
                [121.59996, 31.197646],
                [121.40018, 31.197622],
                [121.69991, 31.207649]
              ],
              searchOption: {
                city: '北京',
                citylimit: true
              },
              mapCenter: [116.408016, 39.948038]
    }
}

3.2 所需方法

methods: {
    // 高德地圖搜索功能
       addMarker: function() {
          let lng = 121.5 + Math.round(Math.random() * 1000) / 10000;
          let lat = 31.197646 + Math.round(Math.random() * 500) / 10000;
          this.markers.push([lng, lat]);
        },
        onSearchResult(pois) {
          let latSum = 0;
          let lngSum = 0;
          if (pois.length > 0) {
            pois.forEach(poi => {
              let {lng, lat} = poi;
              lngSum += lng;
              latSum += lat;
              this.markers.push([poi.lng, poi.lat]);
            });
            let center = {
              lng: lngSum / pois.length,
              lat: latSum / pois.length
            };
            this.mapCenter = [center.lng, center.lat];
          }
       },
}

3.3 添加標籤

<!-- 高德地圖 -->
                 <div class="amap-page-container">
                  <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
                  <el-amap vid="amapDemo" :center="mapCenter" :zoom="12" :events="events" class="amap-demo">
                    <el-amap-marker v-for="marker in markers" :position="marker" :key="marker.index" ></el-amap-marker>
                  </el-amap>
                </div>

最終效果

說明

本次代碼是筆者在工作中遇到的問題，本次接入高德地圖採用amap開源項目

開源項目地址:https://elemefe.github.io/vue-amap

在對接amap中遇到了許多問題，今天奉上無報錯的完美代碼

本代碼經過測試，完美運行！！！