公司有些业务涉及微信小程序,此前并没有接触过,所以想搞个东西练练手,然后就有了下文。
目录
一、小程序演示
(不要在意小程序的名字,改个名字300块,改不起):
二、开发意图:
很多时候我们需要知道某地的行政区划信息或者街道信息,但是往往不知道。
我自己比较常见到的情形就是在各个电商平台填收货地址,就涉及到街道信息,尤其是帮别人填的时候。
三、开发思路:
第一步:要确认用什么形式
那肯定就是小程序了。以前觉得小程序是个鸡肋,后来接触多了,越来越觉得小程序的方便性。
第二步:找接口
地图服务提供商就那么几家,做小程序优先考虑腾讯,然后发现腾讯地图有小程序SDK:
在翻看文档的时候就发现有这么一个接口:
这个接口提供由坐标到坐标所在位置的文字描述的转换,输入坐标返回地理位置信息和附近poi列表。
说白了就是传入一个经纬度信息,返回当前点的文字描述。
这,就是我想要的。
但是直接让用户填经纬度,这肯定是SB行为,怎么办?
我平时使用高德地图,最常用的就是搜索和地图选点,如果能让用户直接在地图上选点或者搜索,然后得出经纬度,这个问题不就解决了。
但是,没有找到地图选点这个接口。
继续翻文档,在微信小程序插件里发现了地图选点插件,虽然当时还不了解插件的用法,但是用这个能解决问题,这就足够了。
第三步:确定业务逻辑及页面设计
不搞花里胡哨的,样式选择weui。
首页设计:
当用户首次打开授权位置后即对当前位置进行查询,内容展示在首页,最主要的两条信息行政区划和街道加粗,为什么这两不放在一起?自我感觉放在一起,头重脚轻。
同时提供地图选点功能,此功能来源于腾讯地图选点插件。
用户选点后返回经纬度,使用逆地址解析接口进行解析。
四、详细开发过程
1、首先注册小程序,我以前有就没重新申请。
2、注册腾讯位置服务开发者
链接如下:
专属邀请码: CWDRFLC
专属邀请链接: https://lbs.qq.com?lbs_invite=CWDRFLC
个人开发者接口调用数是有限额的,免费额度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
你的应用程序是否经常需要获取用户位置信息?是否在某些场合下需要展示地图以及地图上的某些地点?是否需要获取行政区划列表(省市区)?是否需要为在地图上规划一条合理路线?
如果需要快来使用腾讯位置服务吧!
专属邀请码: CWDRFLC
专属邀请链接: https://lbs.qq.com?lbs_invite=CWDRFLC
欢迎关注微信公众号,公众号的好处是可以持续保持联系。
五、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:'无商圈信息',
crossroad_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: '行政区划、街道信息查询',
}
},
onl oad: 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("crossroad")){
//路口 crossroad_title
app.globalData.crossroad_title = result.address_reference.crossroad.title+" "+result.address_reference.crossroad._dir_desc;
}
//街道
if(result.address_reference.hasOwnProperty("town")){
//路口 crossroad_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,
crossroad_title: app.globalData.crossroad_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
});
},
})