微信小程序wx.getLocation+腾讯地图手动选择地址及解析地址

这篇具有很好参考价值的文章主要介绍了微信小程序wx.getLocation+腾讯地图手动选择地址及解析地址。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、小程序使用腾讯地图-入门及使用限制

步骤:

入驻腾讯位置服务平台
申请开发者密钥（Key）：申请秘钥
Key的作用与注意事项
微信公众平台绑定插件

参考地址: https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginStart

二、小程序使用腾讯地图解析地址(坐标->位置)

1.步骤

申请开发者密钥（key）：申请密钥
开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
安全域名设置，在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名，添加https://apis.map.qq.com：

参考地址: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

2. 小程序代码示例

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
// qqmap-wx-jssdk.js在参考链接官方下下载
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;

onLoad: function () {
		// 实例化API核心类
		qqmapsdk = new QQMapWX({
				key: '申请的key'
		});
},

getLocation() {
	let _self = this;
	wx.getLocation({
		type: 'gcj02',
		isHighAccuracy: true,
		altitude: true,
		success(res) {
			// console.log("res22-getLocation", res);
			const speed = res.speed
			const accuracy = res.accuracy

			let { latitude, longitude } = res
			_self.setData({
				latitudeAddress: latitude,
				longitudeAddress: longitude,
			})
			// 调用腾讯地图api获取当前位置
			qqmapsdk.reverseGeocoder({
				location: {
					latitude: latitude,
					longitude: longitude
				},
				success: function (res) {
					_self.setData({
						detailAddress: res.result.address,
					})
					console.log("res-reverseGeocoder-success", res.result);
				},
				fail: function (res) {
					// console.log("res-reverseGeocoder-fail", res.result);
				},
				complete: function (res) {
					// console.log("res-reverseGeocoder-complete", res.result);
					wx.hideLoading();
				}
			});
		}
	})
},

三、腾讯地图选点插件

1、插件申请接入：

在腾讯微信公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务地图选点” 申请，申请后小程序开发者可在小程序内使用该插件。

2、引入插件包：

地图选点appId： wxXXXXXX你的appId
代码如下（示例）：

// app.json
{
    "plugins": {
        "chooseLocation": {
        "version": "1.0.9",
        "provider": "你的appId"
        }
    }
}

3、设置定位授权：

地图选点插件需要小程序提供定位授权才能够正常使用定位功能：

// app.json
{
    "permission": {
        "scope.userLocation": {
        "desc": "你的位置信息将用于小程序定位"
        }
    }
}

4、使用插件：

插件页面调用示例：

const key = ''; //使用在腾讯位置服务申请的key
const referer = ''; //调用插件的app的名称
const location = JSON.stringify({
  latitude: 39.89631551,
  longitude: 116.323459711
});
const category = '生活服务,娱乐休闲';
 
wx.navigateTo({
  url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
});

5、插件接口调用示例：

const chooseLocation = requirePlugin('chooseLocation');
Page({
    // 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
    onShow () {
        const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    },
    onUnload () {
        // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
        chooseLocation.setLocation(null);
    }
})

四、整体demo

微信获取当前经纬度并解析为地址, 并且可以实时打开地图选址demo页面
app.json

"permission": {
	"scope.userLocation": {
		"desc": "你的位置信息将用于小程序位置接口的效果展示"
	}
},
"plugins": {
	"chooseLocation": {
		"version": "1.0.9",
		"provider": "你的appId"
	}
}

使用页面demo

// index.js
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
const chooseLocation = requirePlugin('chooseLocation');

Page({
  data: {
    detailAddress: "",
    latitudeAddress: "",
    longitudeAddress: "",
    callDetailShow: false,
    locationAdd: {},
  },

  onLoad() {
    
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'NIOBZ-QVBWV-CKLPF-UMXFI-B45LK-TEBCF'
    });
    this.getLocation();
   
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
    console.log("chooseLocation-onShow111", location);
    if (location != null) {
      this.setData({
        detailAddress: location.address,
        latitudeAddress: location.latitude,
        longitudeAddress: location.longitude,
      })
    }
  },
  /**
  * 生命周期函数--监听页面隐藏
  */
  onHide() {
  },
  /**
  * 生命周期函数--监听页面卸载
  */
  onUnload() {
    // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
    chooseLocation.setLocation(null);
  },
  
  getLocation() {
    let _self = this;
    wx.getLocation({
      type: 'gcj02',
      isHighAccuracy: true,
      altitude: true,
      success(res) {
        // console.log("res22-getLocation", res);
        const speed = res.speed
        const accuracy = res.accuracy

        let { latitude, longitude } = res
        _self.setData({
          latitudeAddress: latitude,
          longitudeAddress: longitude,
        })
        // 调用腾讯地图api获取当前位置
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            _self.setData({
              detailAddress: res.result.address,
            })
            console.log("res-reverseGeocoder-success", res.result);
          },
          fail: function (res) {
            // console.log("res-reverseGeocoder-fail", res.result);
          },
          complete: function (res) {
            // console.log("res-reverseGeocoder-complete", res.result);
            wx.hideLoading();
          }
        });
      }
    })
  },
  updataAddress() {
    const key = 'XXXXX-TEBCF'; //使用在腾讯位置服务申请的key
    const referer = '小程序报警'; //调用插件的app的名称
    wx.navigateTo({
      url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer
    });
  },
  isRecordsSendChange(event) {
    console.log("isRecordsSendChange", event.detail);
    if (event.detail) {
      this.setData({
        isRecordsSend: 1,
      });
    } else {
      this.setData({
        isRecordsSend: 0,
      });
    }

  },