前言：因?yàn)橐彩怯玫纳弦粋€(gè)版本的代碼，為了描述清楚所以就直接復(fù)制文章來更改了，這一版更加完善簡潔，高德地圖精確度也更高
(2021年寫過的一版上線了挺長時(shí)間，2023年突然被應(yīng)用市場下架，說流程走不通，就卡在獲取定位失敗。改了之后已上線運(yùn)行

• 經(jīng)抓包發(fā)現(xiàn)，在本地、測試、預(yù)生產(chǎn)環(huán)境，利用經(jīng)緯度獲取地點(diǎn)這一塊，發(fā)起了api請求https://restapi.amap.com/v3/geocode/regeo?key=。可正常返回地點(diǎn)信息，按照代碼邏輯走
• 正式環(huán)境，會(huì)將https://restapi.amap.com/v3/geocode/regeo?key= 直接被替換這個(gè)鏈接restapi.amap.com/v3/assistant/coordinate/convert?key= regeo根本沒請求，所以后續(xù)代碼邏輯走不通

項(xiàng)目需求是：獲取到當(dāng)前城市定位，然后顯示該城市的服務(wù)項(xiàng)
之前做了一版百度地圖，因?yàn)樯虡I(yè)原因，公司選擇了高德地圖，所以要對地圖進(jìn)行更換。百度地圖原生點(diǎn)這里
也不算順利，之前做的記錄都不存在了。
vue-amap是基于高德原生封裝好的供vue使用，對圖層的操作會(huì)更便捷一些。vue-amap點(diǎn)這里
上一版高德地圖原生js指路

當(dāng)前的需求，只需拿到當(dāng)前定位。所以可以使用原生js

• 用cdn引入

 <script  type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key&plugin=AMap.Geolocation"></script>

• 將cdn引入vue項(xiàng)目里

 externals: {
      // 'BMap':"BMap",
      AMap: 'AMap', // 高德地圖配置
      AMapUI: 'AMapUI'
    }

• 不用設(shè)置 import AMap form’AMap’
  踩得最大的坑就是這個(gè)，不曉得為什么網(wǎng)上這多人引入
  一會(huì)‘AMap’ is not defined
  一會(huì)出現(xiàn) To install it, you can run: npm install --save AMap
  光是為解決出現(xiàn)的引入問題就花了大半時(shí)間

• 尤其與之對應(yīng)的 .getCurrentPosition方法更是花樣報(bào)錯(cuò)，把所有報(bào)錯(cuò)輪了一遍。有博主說是在https環(huán)境下才能獲取成功
  

• （更新）：融合了HTML5 Geolocation定位接口、精確IP定位服務(wù)，以及安卓定位sdk定位。定位流程如下：

• 開發(fā)者開啟了sdk輔助定位，安卓手機(jī)上會(huì)優(yōu)先嘗試調(diào)用sdk的定位接口，

• 失敗之后優(yōu)先調(diào)用瀏覽器原生定位接口進(jìn)行定位

• 瀏覽器定位失敗之后嘗試進(jìn)行精確IP定位

• IP定位獲取當(dāng)前城市定位

前文也說了，高德地圖進(jìn)行升級(jí)了，定位失敗率降低，則思路如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-500355.html

• 上一版通過定位拿到城市邊緣經(jīng)緯度再去請求城市中心這個(gè)操作只作為備用選項(xiàng)，為了防止失敗。
• 如果獲取不到精確定位會(huì)返回狀態(tài)碼error，則在error情況下，進(jìn)行城市信息獲取
• 如果獲取到定位則直接進(jìn)行業(yè)務(wù)邏輯編寫
• 新增了 needAddress 屬性，當(dāng)定位成功，可以獲取返回定位信息。相應(yīng)的信息也要處理。該屬性藏得很深，反正找到了兩份不同的文檔吧

 getAmap(){
       
        const that = this;
        AMap.plugin("AMap.Geolocation", () => {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默認(rèn)：true
            enableHighAccuracy: true,
            //是否使用安卓定位sdk用來進(jìn)行定位，需要安卓端sdk配合
            useNative: true,
            // 設(shè)置定位超時(shí)時(shí)間，默認(rèn)：無窮大
            timeout: 10000,
            needAddress : true,
          });

          geolocation.getCurrentPosition((status, result) => {  //獲取用戶當(dāng)前的精確位置
            if (status == "complete") {
             
				 let data=result.addressComponent 
				 //重點(diǎn)：設(shè)置了needAddress屬性 定位返回的信息回包含addressComponent對象，里面返回的內(nèi)容跟regeo請求返回addressComponent 對象一致。
				 if(data.adcode){
               	//業(yè)務(wù)邏輯代碼
              }else {
                that.surePosition(result.position[0],result.position[1]) //防止返回信息不同
            }
            else {
              geolocation.getCityInfo((status, result) => {   //只能獲取當(dāng)前用戶所在城市和城市的經(jīng)緯度
                if (status == "complete") {
                 //業(yè)務(wù)邏輯代碼
                }else {
                  that.showCity = '未獲取定位'
                  
                }
              })
            }
          })
        })
      },

• 獲取到了大致經(jīng)緯度與城市，最好再一次進(jìn)行逆地址編碼請求
• 逆地址編碼請求結(jié)果更詳細(xì)更確定城市地址。
• extensions=all可以不設(shè)置，但設(shè)置了會(huì)獲得地標(biāo)信息商圈這種信息

surePosition(re0,re1){
        const that = this;
        let key='你的key'
        axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${re0+','+re1}&extensions=all`)
          .then( (response) => {
            console.log('response'+response.data)
            if(response.data.status){
             //業(yè)務(wù)邏輯代碼
              } else {
                that.showCity = '未獲取定位'
                
              }
            }
          })
      },

到了這里，關(guān)于(2023進(jìn)階版）vue+h5 通過高德地圖（原生） 獲取當(dāng)前位置定位的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！