开发场景
获取当前位置信息或者某地的行政区划信息或者街道信息，实现类似电商平台填写收货地址功能。
技术选型
确定业务逻辑及页面设计
以简洁大气为主，样式选择weui。
详细开发过程
1、首先注册小程序，我以前有就没重新申请。
需要注意的是：个人开发者接口调用数是有限额的，免费额度1W，并发数5，申请成为企业用户可免费提升更大配额。
3、根据文档开发。
文档写的比较全，很多地方都是例子，不过需要注意以下几个点：
1）reverseGeocoder接口返回数据和文档不一致，需要根据实际返回值编写，另外有些字段在返回值中不一定有，最好用hasOwnProperty进行判断后赋值。
2）实际上文档有点乱，需要查看多个地方的文档。
文档参考地址：
https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
JS代码
//index.js
//获取应用实例
const app = getApp()
const chooseLocation = requirePlugin(\'chooseLocation\');
var QQMapWX = require(\'../../utils/qqmap-wx-jssdk.min.js\');
var qqmapsdk = new QQMapWX({
key: \'申请的Key\'
});
Page({
data: {
recommend:\'无地址信息\',
address:\'无地址信息\',
name:\'无区划信息\',
adcode:\'无代码信息\',
business_area_title:\'无商圈信息\',
cros-s-road_title:\'无路口信息\',
town:\'无街道信息\',
jingweidu:\'无经纬度信息\',
landmark:\'无附近地标\',
},
onShareAppMessage: function (res) {
if (res.from === \'button\') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: \'行政区划、街道信息查询\',
path: \'/page/index/index\'
}
},
onShareTimeline: function(){
return {
title: \'行政区划、街道信息查询\',
}
},
onLoad: function () {
// 实例化API核心类
wx.getSetting({
success: (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.getLocation();
} else {
wx.showToast({
title: \'授权失败\',
icon: \'none\',
duration: 1000
})
}
}
})
}
}
})
} else if (res.authSetting[\'scope.userLocation\'] == undefined) {
//调用wx.getLocation的API
this.getLocation();
}
else {
//调用wx.getLocation的API
this.getLocation();
}
}
})
},
getLocation: function(){
var vm = this;
wx.getLocation({
type:\'gcj02\',
success: function(res){
app.globalData.latitude=res.latitude;
app.globalData.longitude=res.longitude;
vm.getaddressinfo();
},
fail:function(res){
console.log("获取经纬度失败"+JSON.stringify(res))
}
})
},
onShow: function(){
var vm = this;
const location = chooseLocation.getLocation();
if(location!=null){
app.globalData.latitude=location.latitude;
app.globalData.longitude=location.longitude;
this.getaddressinfo();
}
},
getaddressinfo: function(){
let vm = this;
qqmapsdk.reverseGeocoder({
location: {
latitude: app.globalData.latitude,
longitude: app.globalData.longitude
},
get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
success: function(res) {//成功后的回调
var result = res.result;
//推荐地址
app.globalData.recommend = result.formatted_addresses.recommend;
// 行政区划 name
app.globalData.name = result.ad_info.name;
//常规地址 address
app.globalData.address = result.address;
//行政区划代码 adcode
app.globalData.adcode = result.ad_info.adcode;
if(result.address_reference.hasOwnProperty("business_area")){
//商圈 business_area_title
app.globalData.business_area_title = result.address_reference.business_area.title+" "+result.address_reference.business_area._dir_desc;
}
if(result.address_reference.hasOwnProperty("cros-s-road")){
//路口 cros-s-road_title
app.globalData.cros-s-road_title = result.address_reference.cros-s-road.title+" "+result.address_reference.cros-s-road._dir_desc;
}
//街道
if(result.address_reference.hasOwnProperty("town")){
//路口 cros-s-road_title
app.globalData.town = result.address_reference.town.title+" "+result.address_reference.town._dir_desc;
}
if(result.address_reference.hasOwnProperty("landmark_l2")){
app.globalData.landmark = result.address_reference.landmark_l2.title;
}
if(result.address_reference.hasOwnProperty("landmark_l1")){
app.globalData.landmark = result.address_reference.landmark_l1.title;
}
vm.setData({
recommend: result.formatted_addresses.recommend,
name: result.ad_info.name,
address: result.address,
adcode: result.ad_info.adcode,
business_area_title: app.globalData.business_area_title,
cros-s-road_title: app.globalData.cros-s-road_title,
town: app.globalData.town,
jingweidu: result.location.lat+", "+result.location.lng,
landmark: app.globalData.landmark,
});
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
// console.log(res);
}
})
},
onUnload () {
// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
chooseLocation.setLocation(null);
},
getUserInfo: function(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
change: function(){
const key = \'使用在腾讯位置服务申请的key\';
const referer = \'这是哪\'; //调用插件的app的名称
const location = JSON.stringify({
latitude: app.globalData.latitude,
longitude: app.globalData.longitude
});
const category = \'生活服务,娱乐休闲\';
wx.navigateTo({
url: \'plugin://chooseLocation/index?key=\' + key + \'&referer=\' + referer + \'&location=\' + location + \'&category=\' + category
});
},
})
效果
作者：w_boyang
链接：https://blog.csdn.net/qq_34136569/article/details/111281654
来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
请发表评论