更新：

可喜可贺，本篇中奖了

腾讯视频年卡一张，感谢腾讯感谢CSDN！

公司有些业务涉及微信小程序，此前并没有接触过，所以想搞个东西练练手，然后就有了下文。

一、小程序演示

二、开发意图：

三、开发思路：

第一步：要确认用什么形式

第二步：找接口

第三步：确定业务逻辑及页面设计

首页设计：

四、详细开发过程

JS代码：

一、小程序演示

（不要在意小程序的名字，改个名字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: '行政区划、街道信息查询',}},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的APIthis.getLocation();} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//调用wx.getLocation的APIthis.getLocation();}else {//调用wx.getLocation的APIthis.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_titleapp.globalData.business_area_title = result.address_reference.business_area.title+" "+result.address_reference.business_area._dir_desc;}if(result.address_reference.hasOwnProperty("crossroad")){//路口 crossroad_titleapp.globalData.crossroad_title = result.address_reference.crossroad.title+" "+result.address_reference.crossroad._dir_desc;}//街道if(result.address_reference.hasOwnProperty("town")){//路口 crossroad_titleapp.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.userInfothis.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});},
})

基于腾讯位置服务，从零设计开发逆地址解析小程序相关推荐

uniapp h5 位置选择，微信定位+腾讯位置服务获取当前地址，逆地址解析
我的网站:https://green.yuansu.space 一.获取当前地理坐标首先引入JSSDK npm install jweixin-module --save 使用 var jweixi ...
（后续更新）【微信小程序】毕业设计租房小程序开发实战，零基础开发房屋租赁系统小程序
文章目录说在前面小程序展示一.各功能模块介绍 1.房产服务模块 2.个人中心模块 3.动态发布模块 4.订单管理模块 5.房屋评价模块二.开发环境准备 1.注册微信小程序账号 2.下载微信开发 ...
基于腾讯位置服务获取IP归属地实践
本文分析项目中获取外网IP地址以及调用腾讯地图接口获取IP归属地信息. 一.获取IP Web项目按如下代码可获取IP地址,需注意获取的是外网地址,本地项目返回为空. @Autowire ...
小程序腾讯位置服务路线规划插件申请方法
如果用以下常规的方法个人小程序大概率是通过不了的在腾讯微信公众平台中, "微信小程序官方后台-设置-第三方服务-插件管理" 里点击 "添加插件",搜索 &qu ...
腾讯位置服务：有何优势？如何使用平台创建应用和服务调用的 Key？
文章目录前言一.腾讯位置服务的优势 1.1.提供丰富的地图产品 1.2.提供行业解决方案 1.3.提供其他生态维度的支持 1.4.海量的数据基础 1.5.丰富的开发文档二.初识腾讯位置服务 2. ...
“技术让生活更便捷”之腾讯位置服务JavaScript API2.0前端定位和位置标注的开发实录
文章目录前言一.项目需求 1.项目需求 2.需求分解二.开发实战 1.引入功能库和附件库 2.构建腾讯地图容器 3.调用前端定位组件 1.定位成功回调函数获取位置坐标显示地图定义当前位置ma ...
腾讯位置服务定位组件实现周边公用厕所远近排序分布图
前言地图应用非常广泛,目前地图服务,都提供地图操作.标注.地点搜索.出行规划.地址解析.街景等接口,功能非常丰富.在实际开发过程中,各有优劣.本次基于需求,使用腾讯位置服务作为一个公用厕所位置标注的 ...
发布地图服务属性表_Web3D地图来了！腾讯位置服务正式版发布！
公众号关注 "菜鸟要飞" 设为 "星标",和10万程序员一起成长! 原文转载自公众号[开发者技术前线] 腾讯位置服务在半年前推出JavaScript API G ...
国外基于android的系统,基于Android的位置服务系统设计与实现
摘要: 近年来,随着移动互联网的飞速发展,位置服务已经成为移动增值业务的一个重要发展方向,然而由于现代位置服务应用规模不断扩大,用户和兴趣点的数据急剧增加,降低了周围兴趣点查询服务的实用性.本文通过地 ...

基于腾讯位置服务，从零设计开发逆地址解析小程序

一、小程序演示

二、开发意图：

三、开发思路：

第一步：要确认用什么形式

第二步：找接口

第三步：确定业务逻辑及页面设计

首页设计：

四、详细开发过程

五、JS代码：

基于腾讯位置服务，从零设计开发逆地址解析小程序相关推荐

最新文章

热门文章