小程序开发笔记【四】，集成高德地图进行逆地址解析

时间 2019-12-14

标签程序开发笔记集成地图进行地址解析繁體版

原文原文链接

微信小程序获取及选择位置

获取当前的地理位置、速度

wx.getLocation({
        type: "wgs84", //wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标  gcj02在android机上有bug，没法选择位置
        success(res) {
        }
      });

打开地图选择位置

wx.chooseLocation({
            success(res) {
              let name = res.name; //名称
              let address = res.address; //详细地址
              let longitude = res.longitude;//经度
              let latitude = res.latitude;//纬度
                fail: function(info){
                  //失败回调
                  console.log(info)
                }
              })
            }
          });

使用微信内置地图查看位置

openLocation(item){
      let longitude = item.longitude;
      let latitude = item.latitude;
      wx.openLocation({
        latitude,
        longitude,
        scale: 18
      });
    },

逆地址解析（根据经纬度坐标获取城市省份信息）

微信小程序位置api并无提供获取省份城市的信息，这里使用高德第三方地图来获取省份城市vue

申请高德key
将https://restapi.amap.com添加到微信小程序合法域名里面android
下载高德微信小程序sdk
https://lbs.amap.com/api/wx/downloadgit

高德微信小程序sdk文档说明
https://lbs.amap.com/api/wx/reference/coreweb

在vue文件中引入

import amapFile from "../../../../../static/sdk/amap-wx";

初始化地图及获取省份城市信息

mounted() {
    this.initMap();
  },
initMap(){
      this.myAmapFun = new amapFile.AMapWX({key:'app key'});
    },

that.myAmapFun.getRegeo({
                location:`${longitude},${latitude}`,
                success: function(data){
                  let province = data[0].regeocodeData.addressComponent.province;
                  let city = data[0].regeocodeData.addressComponent.city;
                  // city:[]
                  if(Object.prototype.toString.call(city)=="[object Array]"){
                    city = city.join('');
                  }
                  that.province = province;
                  that.city = city;
                },
                fail: function(info){
                  //失败回调
                  console.log(info)
                }
              })

返回参数说明
https://lbs.amap.com/api/webservice/guide/api/georegeo/#regeo小程序

进入小程序让只初始化一次

在main.js中引入并初始化

import amapFile from'../static/sdk/amap-wx';
//将其绑定到vue原型上  //使用 this.$myAmapFun访问
let myAmapFun = new amapFile.AMapWX({ key: 'app key' });
Vue.prototype.$myAmapFun = myAmapFun

vue组件中使用高德地图

that.$myAmapFun.getRegeo({
                location:`${longitude},${latitude}`,
                success: function(data){
                  let province = data[0].regeocodeData.addressComponent.province;
                  let city = data[0].regeocodeData.addressComponent.city;
                  // city:[]
                  if(Object.prototype.toString.call(city)=="[object Array]"){
                    city = city.join('');
                  }
                  that.province = province;
                  that.city = city;
                },
                fail: function(info){
                  //失败回调
                  console.log(info)
                }
              })