第四章 微信小程序地图逆解析

前言

根据业务需求，需要使用腾讯地图展示用户的地理位置。并根据用户当前位置的经纬度进行逆地址解析获取地址描述。

一、获取经纬度

根据微信原生api获取用户的经纬度

getLocation 需要在app.json的requiredPrivateInfos 里进行配置，并在微信公众平台进行申请

 // 微信获得经纬度
 getLocation() {
  wx.getLocation({
   type: "wgs84",
   isHighAccuracy: true,
   success: function (res) {
    var latitude = res.latitude;
    var longitude = res.longitude;
    // var speed = res.speed;
    // var accuracy = res.accuracy;
    // 存储经纬度
    wx.setStorageSync("Latitude", latitude);
    wx.setStorageSync("Longitude", longitude);
    this.setData({
     latitude,
     longitude,
    });
   },
   fail: function (res) { },
  });
 }

二、调用腾讯地图

调用腾讯地图的公共方法

	// 地图
	function onMapLocation(params) {
	  let { latitude, longitude, name, address } = params
	  wx.openLocation({
	    latitude,  //经度
	    longitude, //纬度
	    name,      // 位置名
	    address,   // 要去的地址详情说明
	    scale: 28,  // 地图缩放级别,整形值,范围从1~28。默认为最大
	    success: function (data) {},
	    fail(res) {	},
	    complete() { }
	  })
	}

三、地址逆解析

根据微信的原生方法获取用户的经纬度，然后对签名字符串加密，调用微信的请求方法进行地址逆解析，获取位置信息

用户的key需要自己去腾讯地图控制台申请

md5.js 文件

加密操作可以不进行，即sign参数可不传，这个看业务需求

var wxmd5 = require("./md5");

// 微信获得经纬度
function getLocation() {
  wx.getLocation({
    type: 'wgs84',
    success: function (res) {
      var latitude = res.latitude
      var longitude = res.longitude
      var speed = res.speed
      var accuracy = res.accuracy;
      // 存储经纬度
      wx.setStorageSync('Latitude', latitude)
      wx.setStorageSync('Longitude', longitude)
      var locationString = latitude + ',' + longitude;
      // 对签名字符串进行 MD5 加密
      const sign = wxmd5.wxMD5('/v1/ws/geocoder/v1/?key=${你们自己的key}&location=${longitude},${latitude}6hwfUIS2dfEaEQgJU8u2zu4UhGCDkv1');
      // 地址逆解析
      wx.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        data: {
          key: '你们自己的key',
          location: locationString,
          sign: sign 
        },
        method: 'GET',
        header: {
          'content-type': 'application/json' // 默认值
        },
        success(res) {
          let { address_component } = res.data.result
          // 存储解析后的用户地址
          wx.setStorageSync("address_component", address_component)
        }
      })
      wx.setStorageSync("address_component", address_component);
    },
    fail: function (res) {}
  })
}

总结

以上是使用微信地图相关的经历。