前言

最近有一个小程序的开发需求：获取当前用户的定位，并显示在自定义的地图上，然后需要获取当前的地理位置名称。

实现

wx.getLocation

微信自带的函数可以获取一些信息，比如经纬度还有其他，具体的参数可以看文档。
这就是wx.getLocation获取的json结果：

accuracy: 65
errMsg: "getLocation:ok"
horizontalAccuracy: 65
latitude: 31.36897
longitude: 120.64247
speed: -1
verticalAccuracy: 65

可以看到，虽然可以获取经纬度，但是你无法准确获取所在位置的名称。

如果仅仅需要经纬度，那自带的就足够了。

腾讯位置服务

腾讯位置服务提供了一个SDK，可以支持多种设备进行调用，获取一些位置相关的服务。当然这个有免费版和收费版，开发免费版足够了。

微信小程序相关的文档在此，主要的流程文档上也写清楚了：

申请开发者密钥（key）：申请密钥

开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2

安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com

申请key

首先就是在腾讯位置服务里面创一个可以调用的key，填入相关信息后完成创建，这个key后面会用到。

安全域名设置

登录你的小程序的微信公众平台，在微信公众平台处添加request合法域名，位置在开发->开发设置->服务器域名处

小程序

下面就是一些关键代码了。

js

首先导入SDK，然后利用SDK的方法获取相关信息，返回的json里面包含地理位置名称，代码如下：

var QQMapWX = require('../../libs/qqmap-wx-jssdk1/qqmap-wx-jssdk.js');
var qqmapsdk;onLoad: function (options) {// 实例化API核心类qqmapsdk = new QQMapWX({key: '你的key'});// 直接获取地址var that = thisqqmapsdk.reverseGeocoder({success: function (res) {//获取当前地址成功console.log(res);that.setData({latitude: res.result.location.lat,longitude: res.result.location.lng,address: res.result.address})},fail: function (res) {console.log('获取当前地址失败');}})

wxml

这里设置了一个隐藏的input，复制了地理位置名称，这样提交form表单的时候就可以一起提交了。

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" name="map" bindmarkertap="markettap" bindregionchange="regionchange" show-location style="width:100%;height:100px;">
</map>
<view class="section__title">{{address}}</view>
<input name="address" style="display: none;" value='{{address}}'/>

小程序地图功能及腾讯位置服务SDK获取当前位置名称并显示相关推荐

【微信小程序腾讯位置服务】获取用户所在城市信息实战
背景实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
微信小程序手把手接入腾讯地图
正经学徒,佛系记录,不搞事情一.理解腾讯地图于小程序的作用要想在小程序上使用腾讯地图,就要先去理解腾讯地图是在做什么 map 地图.该组件是原生组件,使用时请注意相关限制. 个性化地图能力可在小程 ...
小程序之引入腾讯路线规划插件实现地图路线导航功能
在小程序内部插入腾讯地图实现起点到终点的路程规划效果图如下: 一:申请路线规划插件 1.在微信公众平台申请插件,登陆小程序账号,"登录"->"设置"- ...
从零开始部署小程序服务器（腾讯云）
从零开始部署小程序服务器(腾讯云) 话说目前云已经很便宜了,腾讯有一个月的试用期,不过阿里云也有,而且对于学生认证的用户 9.9元一个月的最低配置,这让 Lefe 才有可能尝试配置一个线上的服务器.从 ...
微信小程序地图功能的实现 map
微信小程序地图功能的实现 map wxml部分地图标签 wxss js 这次项目有个功能是地图以选项卡方式可以选择进行不同位置展示实现方法就是将地图和tab选项卡结合选项卡刚开始我套了之前的滑动 ...
腾讯小程序php,微信小程序实现使用腾讯地图SDK步骤详细介绍
这篇文章微信小程序实现使用腾讯地图SDK步骤详细介绍的相关资料,需要的朋友可以参考下微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来 ...
小程序，是腾讯云的杀手锏？
"[报告下载]后台回复关键词"数据智能"可免费下载数据猿最新发布的完整高清版<2021中国数据智能产业发展报告> 大数据产业创新服务媒体 --聚焦数据 · 改 ...
快手小程序计划引入三方服务商：服务开发者需超过10人
快手电商推出跟播助手精准流量匹配模式新榜讯 5月25日,快手电商上线跟播助手精准流量匹配模式,平台算法会根据跟播助手-待上车列表的下三个商品匹配对应流量至直播间,以帮助上车对应商品承接精准流量,提升 ...
微信小程序原生接入腾讯云im（单聊，列表，聊天界面，自定义消息，自动回复）
微信小程序原生接入腾讯云im(单聊,列表,聊天界面,自定义消息,自动回复) 发送图片语音消息传送→ 文章目录 1.项目需求 2.参考文档 3.效果图 4.初始化集成SDK 5.登录 6.会话列表 7 ...

小程序地图功能及腾讯位置服务SDK获取当前位置名称并显示

前言

实现