步骤
- 使用 wx.getLocation来获取位置授权:获取到设备当前的地理位置信息,这个信息是当前位置的经纬度
- 使用其他第三方地图服务的API:获取当前位置是处于哪个国家,哪个城市等信息(eg:腾讯地图、百度地图)。
- 以腾讯地图为例 去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key)。
- 在我们的代码中调用这个API。该API可以通过JSONP的方式调用,也可以在服务器端发起调用。
具体步骤知识参考:https://lbs.qq.com/guides/startup.html
代码
(1)获取地理经纬度wx.getLocation
(2)下载微信小程序JavaScriptSDK
(3)安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com
(4)小程序代码完整示例
注意:微信小程序使用的时候,WebServiceAPI 域名白名单不能配置,否则会报错
<text>经纬度:{{latitude}},{{longitude}}</text>
<view><text>位置:</text><text>{{province}} </text><text>{{city}} </text><text>{{district}} </text>
</view>
<button bindtap="getLocation">获取当前城市位置</button>var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({data: {province: '',city: '',district: '',latitude: '',longitude: '',},onLoad: function (options) {qqmapsdk = new QQMapWX({key: 'YRXBZ-42R3W-6XVRG-R3V7B-CAOE7-TQB43'});},getLocation () {let _this = thiswx.getSetting({success: (res) => {console.log(JSON.stringify(res))// res.authSetting['scope.userLocation'] == undefined 表示 初始化进入该页面// res.authSetting['scope.userLocation'] == false 表示 非初始化进入该页面,且未授权// res.authSetting['scope.userLocation'] == true 表示 地理位置授权if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {wx.showModal({title: '请求授权当前位置',content: '需要获取您的地理位置,请确认授权',success: function (res) {if (res.cancel) {wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})//再次授权,调用wx.getLocation的API_this.getToLocation()} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//调用wx.getLocation的API_this.getToLocation()}else {//调用wx.getLocation的API_this.getToLocation()}}})},// 微信获得经纬度getToLocation: function () {let _this = this;wx.getLocation({type: 'wgs84',success: function (res) {console.log(JSON.stringify(res))var latitude = res.latitudevar longitude = res.longitudevar speed = res.speedvar accuracy = res.accuracy;_this.setData({latitude: res.latitude,longitude: res.longitude})_this.getLocal(latitude, longitude)},fail: function (res) {console.log('fail' + JSON.stringify(res))}})},// 获取当前地理位置getLocal: function (latitude, longitude) {let vm = this;qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {console.log(JSON.stringify(res));console.log(res.result);let province = res.result.ad_info.provincelet city = res.result.ad_info.citylet district = res.result.ad_info.districtvm.setData({province: province,city: city,district: district,latitude: latitude,longitude: longitude})},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});}
})
结果