前言
最近有一个小程序的开发需求:获取当前用户的定位,并显示在自定义的地图上,然后需要获取当前的地理位置名称。
实现
wx.getLocation
微信自带的函数可以获取一些信息,比如经纬度还有其他,具体的参数可以看文档。
这就是wx.getLocation获取的json结果:
accuracy: 65errMsg: "getLocation:ok"horizontalAccuracy: 65latitude: 31.36897longitude: 120.64247speed: -1verticalAccuracy: 65
可以看到,虽然可以获取经纬度,但是你无法准确获取所在位置的名称。
如果仅仅需要经纬度,那自带的就足够了。
腾讯位置服务
腾讯位置服务提供了一个SDK,可以支持多种设备进行调用,获取一些位置相关的服务。当然这个有免费版和收费版,开发免费版足够了。
微信小程序相关的文档在此,主要的流程文档上也写清楚了:
申请开发者密钥(key):申请密钥开通webserviceAPI服务:控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.
申请key
首先就是在腾讯位置服务里面创一个可以调用的key,填入相关信息后完成创建,这个key后面会用到。
安全域名设置
登录你的小程序的微信公众平台,在微信公众平台处添加request合法域名,位置在开发->开发设置->服务器域名
处
小程序
下面就是一些关键代码了。
js
首先导入SDK,然后利用SDK的方法获取相关信息,返回的json里面包含地理位置名称,代码如下:
var QQMapWX = require('../../libs/qqmap-wx-jssdk1/qqmap-wx-jssdk.js');var qqmapsdk;onLoad: function (options) {// 实例化API核心类qqmapsdk = new QQMapWX({key: '你的key'});// 直接获取地址var that = thisqqmapsdk.reverseGeocoder({success: function (res) {//获取当前地址成功console.log(res);that.setData({latitude: res.result.location.lat,longitude: res.result.location.lng,address: res.result.address})},fail: function (res) {console.log('获取当前地址失败');}})
wxml
这里设置了一个隐藏的input,复制了地理位置名称,这样提交form表单的时候就可以一起提交了。
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" name="map" bindmarkertap="markettap" bindregionchange="regionchange" show-location style="width:100%;height:100px;"></map><view class="section__title">{{address}}</view><input name="address" style="display: none;" value='{{address}}'/>