這篇文章主要介紹vue中如何實(shí)現(xiàn)高德定位功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站總部坐落于成都市區(qū)，致力網(wǎng)站建設(shè)服務(wù)有成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷策劃、網(wǎng)頁設(shè)計(jì)、網(wǎng)站維護(hù)、公眾號(hào)搭建、成都微信小程序、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動(dòng)行銷領(lǐng)域創(chuàng)造價(jià)值而不懈努力！Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

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

首先需要成為高德開發(fā)者，申請到適合項(xiàng)目的key.并在index.html中進(jìn)行引入

二、在配置文件中進(jìn)行相應(yīng)配置

根據(jù)vue腳手架的不用需要在不同的文件中進(jìn)行配置。

我項(xiàng)目使用的是cli3的腳手架，需要在Vue.config.js中進(jìn)行高德地圖配置

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

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

因項(xiàng)目需求只需要在注冊頁面進(jìn)行默認(rèn)定位，故只引用一次就行。并沒有單獨(dú)的抽離出來，可以根據(jù)項(xiàng)目的需求進(jìn)行抽離。

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

data() {
  // debugger
  return {
    locationData: {
     // 用于定位相關(guān)信息提交
     lat: "", // 緯度
    lon: "", // 經(jīng)度
     province: "", // 省
     city: "", // 市
     district: "", // 區(qū) 縣
     nowPlace: "", // 省-市-區(qū)
     Address: "" // 詳細(xì)地址
    }
  };
 },
methods:{
 getLocation() {
   const self = this;
   AMap.plugin("AMap.Geolocation", function() {
    var geolocation = new AMap.Geolocation({
     enableHighAccuracy: true, // 是否使用高精度定位，默認(rèn):true
     timeout: 10000, // 超過10秒后停止定位，默認(rèn)：無窮大
     maximumAge: 0, // 定位結(jié)果緩存0毫秒，默認(rèn)：0
     convert: true // 自動(dòng)偏移坐標(biāo)，偏移后的坐標(biāo)為高德坐標(biāo)，默認(rèn)：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
     // 定位出錯(cuò)
     console.log("定位失敗錯(cuò)誤：", 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即為當(dāng)前所在城市信息
      console.log("通過ip獲取當(dāng)前城市：", result);
      //逆向地理編碼
      AMap.plugin("AMap.Geocoder", function() {
       var geocoder = new AMap.Geocoder({
        // city 指定進(jìn)行編碼查詢的城市，支持傳入城市名、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為對應(yīng)的地理位置詳細(xì)信息
         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 指定進(jìn)行編碼查詢的城市，支持傳入城市名、adcode 和 citycode
     radius: 100 // 以已知坐標(biāo)為中心點(diǎn)，radius為半徑，返回范圍內(nèi)興趣點(diǎn)和道路信息
    });
    const lnglat = [longitude, latitude]; // 倒序反寫經(jīng)緯度
    // 天津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為對應(yīng)的地理位置詳細(xì)信息
      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;
      }
      // 提取 省 市 區(qū) 詳細(xì)地址信息 重拼裝省-市-區(qū)信息
      _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); // 回調(diào)函數(shù)
     }
    });
   });
  }
},
 created() {
  this.getLocation();
 }

至此整個(gè)定位的實(shí)現(xiàn)全部結(jié)束，可以準(zhǔn)確的獲取到當(dāng)前所在的省市區(qū)。

以上是“vue中如何實(shí)現(xiàn)高德定位功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：vue中如何實(shí)現(xiàn)高德定位功能-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/djpeoi.html