获取效果
html页面
<view>
<button bindtap="getLocal" wx:if="{{isLocal}}" bindtap="getLocal">获取位置</button>
<button open-type='openSetting' bindopensetting="handleSetting" wx:else>授权获取</button>
<viwe>经度:{{longitude}}</viwe>
<view>纬度:{{latitude}}</view>
<viwe>省:{{province}}</viwe>
<view>市区:{{city}}</view>
</view>
1.下载腾讯sdk的js文件 http://lbs.qq.com/qqmap_wx_jssdk/index.html
2.引入项目
var qqMap = require('../../lib/qqmap-wx-jssdk.js');
var qqmapsdk ;
Page({
data: {
isLocal: true,
longitude: '',
latitude: '',
province: '',
city: ''
},
onLoad: function (options) {
qqmapsdk = new qqMap({
key: 'CK6BZ-BTHCW-4IPRC-OZLAN-ZTITF-Y3FHA'
});
},
getLocal(){
let that = this;
wx.getSetting({
success: (res)=>{
if (!res.authSetting['scope.userLocation']){
wx.authorize({
scope: 'scope.userLocation',
success: (res)=>{
that.showLocal();
that.setData({
isLocal: true
})
},
fail: (err)=>{
that.setData({
isLocal: false
})
}
})
}else{
that.showLocal();
}
}
})
},
showLocal(){
var that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
let latitude = res.latitude
let longitude = res.longitude
that.setData({
latitude,
longitude
})
that.getMapCity(latitude, longitude)
}
})
},
handleSetting(){
var that = this;
wx.getSetting({
success: (res)=>{
if (!res.authSetting['scope.userLocation']){
console.log(1)
wx.showModal({
title: '提示',
content: '不授权将无法获得位置',
showCancel: false
})
that.setData({
isLocal: false
})
}else{
wx.showModal({
title: '提示',
content: '位置授权成功',
showCancel: false
})
that.setData({
isLocal: true
})
}
}
})
},
getMapCity(latitude, longitude){
var that = this;
qqmapsdk.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function(res){
console.log(res)
let province = res.result.ad_info.province;
let city = res.result.ad_info.city;
that.setData({
province,
city
})
},
fail: function(err){
console.log(err)
}
})
}
})
3.注意这个key是自己配置的,需要填写小程序appid和开启webserver服务,不然会不起作用