vue中的高德定位

一、獲取key及在index.htm中引入

• 首先需要成爲高德開發者，申請到適合項目的key.並在index.html中進行引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script>

二、在配置文件中進行相應配置

• 根據vue腳手架的不用需要在不同的文件中進行配置。
• 我項目使用的是cli3的腳手架，需要在Vue.config.js中進行高德地圖配置

externals: {
    'AMap': 'AMap' // 高德地圖配置
  }

三、在需要用到的地方進行地圖初始化及定位操作

• 因項目需求只需要在註冊頁面進行默認定位，故只引用一次就行。並沒有單獨的抽離出來，可以根據項目的需求進行抽離。

import AMap from "AMap"; // 引入高德地圖

data() {
    // debugger
    return {
       locationData: {
         // 用於定位相關信息提交
         lat: "", // 緯度
        lon: "", // 經度
         province: "", // 省
         city: "", // 市
         district: "", // 區 縣
         nowPlace: "", // 省-市-區
         Address: "" // 詳細地址
       }
    };
  },
methods:{
	getLocation() {
      const self = this;
      AMap.plugin("AMap.Geolocation", function() {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默認:true
          timeout: 10000, // 超過10秒後停止定位，默認：無窮大
          maximumAge: 0, // 定位結果緩存0毫秒，默認：0
          convert: true // 自動偏移座標，偏移後的座標爲高德座標，默認：true
        });

        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete(data) {
          // data是具體的定位信息
          // debugger
          console.log("定位成功信息：", data);
          self.newGetAddress(data.position.lat, data.position.lng);
        }

        function onError(data) {
          // debugger
          // 定位出錯
          console.log("定位失敗錯誤：", data);
          self.getLngLatLocation();
        }
      });
    },
    getLngLatLocation() {
      const self = this;
      AMap.plugin("AMap.CitySearch", function() {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function(status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查詢成功，result即爲當前所在城市信息
            console.log("通過ip獲取當前城市：", result);
            //逆向地理編碼
            AMap.plugin("AMap.Geocoder", function() {
              var geocoder = new AMap.Geocoder({
                // city 指定進行編碼查詢的城市，支持傳入城市名、adcode 和 citycode
                city: result.adcode
              });

              var lnglat = result.rectangle.split(";")[0].split(",");

              geocoder.getAddress(lnglat, function(status, data) {
                if (status === "complete" && data.info === "OK") {
                  // result爲對應的地理位置詳細信息
                  console.log(data);
                  self.userInfo.ProvinceName = data.regeocode.addressComponent.province.toString();
                  self.userInfo.CCityName =
                    data.regeocode.addressComponent.city;
                  self.userInfo.RegionName =
                    data.regeocode.addressComponent.district;
                }
              });
            });
          }
        });
      });
    },
    newGetAddress: function(latitude, longitude) {
      const _thisSelf = this;
      _thisSelf.locationData.lat = latitude;
      _thisSelf.locationData.lon = longitude;
      const mapObj = new AMap.Map("mapAmap1");
      mapObj.plugin("AMap.Geocoder", function() {
        const geocoder = new AMap.Geocoder({
          city: "全國", // city 指定進行編碼查詢的城市，支持傳入城市名、adcode 和 citycode
          radius: 100 // 以已知座標爲中心點，radius爲半徑，返回範圍內興趣點和道路信息
        });
        const lnglat = [longitude, latitude]; // 倒序反寫經緯度
        // 天津120 北京110 上海310 重慶500 ,
        const reg1 = /^[1][1][0][0-9][0-9][0-9]/;
        const reg2 = /^[1][2][0][0-9][0-9][0-9]/;
        const reg3 = /^[5][0][0][0-9][0-9][0-9]/;
        const reg4 = /^[3][1][0][0-9][0-9][0-9]/;
        geocoder.getAddress(lnglat, function(status, result) {
          console.log("getAddress", result);
          if (status === "complete" && result.info === "OK") {
            // result爲對應的地理位置詳細信息
            const adcode = result.regeocode.addressComponent.adcode; // 省市編碼
            if (
              reg1.test(adcode) ||
              reg2.test(adcode) ||
              reg3.test(adcode) ||
              reg4.test(adcode)
            ) {
              _thisSelf.locationData.city =
                result.regeocode.addressComponent.province;
            } else {
              _thisSelf.locationData.city =
                result.regeocode.addressComponent.city;
            }
            // 提取 省 市 區 詳細地址信息  重拼裝省-市-區信息
            _thisSelf.locationData.province =
              result.regeocode.addressComponent.province;
            _thisSelf.locationData.district =
              result.regeocode.addressComponent.district;
            _thisSelf.locationData.Address = result.regeocode.formattedAddress;
            _thisSelf.locationData.nowPlace =
              result.regeocode.addressComponent.province +
              result.regeocode.addressComponent.city +
              result.regeocode.addressComponent.district;
            _thisSelf.userInfo.ProvinceName = _thisSelf.locationData.province;
            _thisSelf.userInfo.CCityName = _thisSelf.locationData.city;
            _thisSelf.userInfo.RegionName = _thisSelf.locationData.district;
          } else {
            console.log(_thisSelf.locationData); // 回調函數
          }
        });
      });
    }
},
 created() {
    this.getLocation();
  }

• 至此整個定位的實現全部結束，可以準確的獲取到當前所在的省市區。