uniapp使用高德地圖解析經緯度轉為中文地址

愛吃一塊五花肉發表於2020-11-26

一、下載amap-wx.js

下載地址:https://lbs.amap.com/api/wx/download
獲取檔案如下:
在這裡插入圖片描述
將amap-wx.js複製到自己的專案中。

二、引入微信jsdk

<script lang='ts'>
import { Component, Vue } from "vue-property-decorator";
import _config from "@/config.ts";
var amapFile = require('@/utils/amap-wx.js'),//引入剛剛下載的檔案
		//設定初始化
		markersData = {
		  latitude: '',//緯度
		  longitude: '',//經度
		  key: "xxxxxxxxxxxxxxx"//申請的高德地圖key
		}
@Component({})

Tips:這裡key需要自己在高德地圖申請,申請方法不做過多描述,網上一搜就有很多,對應的key值需要對應的服務。比如:我是微信小程式應用到的,所以就必須選擇微信小程式
在這裡插入圖片描述

三、使用

getLocation() {
    this.getSetting();
    this.doGetLocation();
  }

  /* 是否授權,沒有授權則授權 */
  getSetting() {
    console.log(1)
    return new Promise((resolve, reject) => {
      uni.getSetting({
        success: (res) => {
          if (res.authSetting["scope.userLocation"] === undefined) {
            resolve(0);
            return;
          }
          if (res.authSetting["scope.userLocation"]) {
            resolve(1);
          } else {
            resolve(2);
          }
        },
      });
    });
  }

  //獲取經緯度
  doGetLocation() {
    uni.getLocation({
      type: "wgs84",
      success: (res) => {
        this.getCity(res.latitude, res.longitude);
      },
      fail: (err) => {
        uni.showToast({
          title: "獲取失敗",
        });
      },
    });
  }

	//解析經緯度
  getCity(latitude: any, longitude: any) {
    console.log(latitude,longitude)
    let that = this;
    var myAmapFun = new amapFile.AMapWX({ key: markersData.key });
    myAmapFun.getRegeo({
      location: "" + longitude + "," + latitude + "", //location的格式為'經度,緯度'
      success: function (e: any) {
       that.city = e[0].regeocodeData.addressComponent.city; //城市
        that.province = e[0].regeocodeData.addressComponent.province; //省份
        console.log(that.city,that.province)
      },
      fail: function (info:any) {
        console.log(info);
      },
    });
  }

相關文章