最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue中實(shí)現(xiàn)高德定位功能

 更新時(shí)間:2019年12月03日 10:17:29   作者:寂寞花如雪  
這篇文章主要介紹了vue中實(shí)現(xiàn)高德定位功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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

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

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

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

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

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

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

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

因項(xiàng)目需求只需要在注冊(cè)頁(yè)面進(jìn)行默認(rèn)定位,故只引用一次就行。并沒(méi)有單獨(dú)的抽離出來(lái),可以根據(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, // 超過(guò)10秒后停止定位,默認(rèn):無(wú)窮大
     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("通過(guò)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為對(duì)應(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: "全國(guó)", // 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為對(duì)應(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ū)。

總結(jié)

以上所述是小編給大家介紹的vue中實(shí)現(xiàn)高德定位功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • Vue2和Vue3中如何使用WebSocker封裝詳解

    Vue2和Vue3中如何使用WebSocker封裝詳解

    如果項(xiàng)目中多個(gè)組件都使用到WebSocket請(qǐng)求,那么我們需要對(duì)WebSocket進(jìn)行封裝,方便我們使用,下面這篇文章主要給大家介紹了關(guān)于Vue2和Vue3中如何使用WebSocker封裝的相關(guān)資料,需要的朋友可以參考下
    2024-07-07
  • Vue3 + Element Plus 實(shí)現(xiàn)表格全選/反選/禁用功能(示例詳解)

    Vue3 + Element Plus 實(shí)現(xiàn)表格全選/反選/禁用功能(示例詳解)

    本文詳細(xì)介紹了如何使用Vue3組合式API和ElementPlus實(shí)現(xiàn)表格的全選/反選/禁用功能,并分享了分頁(yè)保持、視覺提示優(yōu)化、性能優(yōu)化等技巧,同時(shí),還提供了常見問(wèn)題的解決方案和擴(kuò)展思考,幫助開發(fā)者構(gòu)建功能豐富且用戶體驗(yàn)良好的表格組件,感興趣的朋友一起看看吧
    2025-03-03
  • element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐

    element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐

    本文主要介紹了element?tab標(biāo)簽管理路由頁(yè)面的項(xiàng)目實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • 淺談在vue中用webpack打包之后運(yùn)行文件的問(wèn)題以及相關(guān)配置方法

    淺談在vue中用webpack打包之后運(yùn)行文件的問(wèn)題以及相關(guān)配置方法

    下面小編就為大家分享一篇淺談在vue中用webpack打包之后運(yùn)行文件的問(wèn)題以及相關(guān)配置方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-02-02
  • 詳解vue中點(diǎn)擊空白處隱藏div的實(shí)現(xiàn)(用指令實(shí)現(xiàn))

    詳解vue中點(diǎn)擊空白處隱藏div的實(shí)現(xiàn)(用指令實(shí)現(xiàn))

    本篇文章主要介紹了詳解vue中點(diǎn)擊空白處隱藏div的實(shí)現(xiàn)(用指令實(shí)現(xiàn)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-04-04
  • 解決vue多層彈框時(shí)存在遮擋問(wèn)題

    解決vue多層彈框時(shí)存在遮擋問(wèn)題

    本文給大家介紹vue多層彈框時(shí)存在遮擋問(wèn)題,解決思路首先想到的是找到對(duì)應(yīng)的遮擋層的css標(biāo)簽,然后修改z-index值,但是本思路只能解決首次問(wèn)題,再次打開還會(huì)存在相同的問(wèn)題,故該思路錯(cuò)誤,下面給大家?guī)?lái)一種正確的思路,一起看看吧
    2022-03-03
  • vue項(xiàng)目中?jsconfig.json概念及使用步驟

    vue項(xiàng)目中?jsconfig.json概念及使用步驟

    這篇文章主要介紹了vue項(xiàng)目中?jsconfig.json是什么,本文僅僅簡(jiǎn)單介紹了?jsconfig?.json?的一些基本配置,而?jsconfig?.json提供了大量能使我們快速便捷提高代碼效率的方法,需要的朋友可以參考下
    2022-07-07
  • vue引入外部的js文件的10種方法總結(jié)

    vue引入外部的js文件的10種方法總結(jié)

    這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中引入外部的js文件的10種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以參考下
    2023-08-08
  • Vue組件的Prop命名約定詳解

    Vue組件的Prop命名約定詳解

    這篇文章主要為大家介紹了Vue組件的Prop命名約定詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • Vue3 table表格組件的使用

    Vue3 table表格組件的使用

    這篇文章主要介紹了Vue3 table表格組件的使用,文章圍繞table表格組件是如何使用的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下
    2021-11-11

最新評(píng)論

高平市| 玉溪市| 黄浦区| 浪卡子县| 萝北县| 赣州市| 雅安市| 郁南县| 元朗区| 桂阳县| 乌海市| 姜堰市| 鹤壁市| 固安县| 安阳市| 于都县| 遂昌县| 都昌县| 德化县| 名山县| 郓城县| 奈曼旗| 新源县| 楚雄市| 蒙阴县| 新龙县| 光山县| 乌海市| 惠东县| 长葛市| 吉首市| 资源县| 武邑县| 乐亭县| 仁布县| 阿克陶县| 台北县| 全椒县| 平安县| 新兴县| 永年县|