前导知识

1. 腾讯地图SDK接入

1. 申请开发者密钥
打开网址 https://lbs.qq.com/console/key.html，申请密钥，填写信息单击“提交”按钮，弹出提示内容 “key创建成功”，单击蓝色按钮设置 key，根据需求选中选项，如下图所示。

2. 下载微信小程序 JavaScriptSDK
官方下载地址：http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.0.zip

3. 登录小程序管理后台
设置安全域名，在 “设置” - “开发设置” 中设置 “request合法域名”，添加 https://apis.map.qq.com。如下图所示。

核心代码讲解

小程序提供了打开微信内置地图的 API 和定位用户位置的 API，需要用户授权才能使用，也就是会自动提示用户“是否同意获取您的位置”，同意后即可获取。

在 app.json 文件中声明 permission 属性

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序定位展示"}}

引入 SDK核心类，并且实例化，用于后期调用

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmap
// 实例化API核心类
var qqmapsdk = new QQMapWX({key: '开发密钥（key）' // 必填
});

当用户授权后，获取当前用户的地理位置（微信返回的是经纬度、速度等参数）

// 获取当前位置（经纬度）onReady() {let vm = this;wx.getLocation({type: 'gcj02',success: (res) => {this.setData({latitude: res.latitude,   //纬度longitude: res.longitude  //经度})},})},

微信没有将经纬度直接转换为地理位置，借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API（返回信息中包括国家，省，市，区，经纬度等地理位置）

查询API文档获得如下信息：
reverseGeocoder(options:Object) ：逆地址解析 。该接口提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表。目前应用于物流、出行、O2O、社交等场景。服务响应速度快、稳定，支撑亿级调用。

满足传统对省市区、乡镇村、门牌号、道路及交叉口、河流、湖泊、桥、poi列表的需求。
业界首创，提供易于人理解的地址描述：海淀区中钢国际广场(欧美汇购物中心北)。
提供精准的商圈、知名的大型区域、附近知名的一级地标、代表当前位置的二级地标等。

注：坐标系采用gcj02坐标系

核心代码

getUserLocation() {let vm = thisqqmap.reverseGeocoder({ //逆地址解析（经纬度 ==> 坐标位置）//位置坐标，默认获取当前位置，非必须参数/*** //Object格式location: {latitude: 39.984060,longitude: 116.307520},*//***//String格式location: '39.984060,116.307520',*/location: {latitude: vm.data.latitude,longitude: vm.data.longitude},success(res) {vm.setData({province:res.result.ad_info.province,city:res.result.ad_info.city,district:res.result.ad_info.district})}})}

完整代码

index.wxml页面代码

<view>经度：{{longitude}}---纬度：{{latitude}}</view>
<view>{{province}}---{{city}}---{{district}}</view>

index.js脚本文件

// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
var qqmap
Page({data: {longitude: '', //经度latitude: '', //纬度province: '', //省city: '', //市district: '' //区/县},onLoad() {// 实例化API核心类qqmap = new QQMapWX({key: '开发密钥（key）' // 必填})},// 获取当前位置（经纬度）onReady() {let vm = this;wx.getLocation({type: 'gcj02',success: (res) => {this.setData({latitude: res.latitude,longitude: res.longitude})vm.getUserLocation()},})},// 获取用户当前位置getUserLocation() {let vm = thisqqmap.reverseGeocoder({ //逆地址解析（经纬度 ==> 坐标位置）location: {latitude: vm.data.latitude,longitude: vm.data.longitude},success(res) {console.log(res)vm.setData({province:res.result.ad_info.province,city:res.result.ad_info.city,district:res.result.ad_info.district})}})}
})

app.json文件

{"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序定位展示"}}
}

运行结果

【微信小程序】调用腾讯地图获取当前城市定位相关推荐

微信小程序调用腾讯地图API进行驾车路线规划
微信小程序调用腾讯地图API进行驾车路线规划申请key 下载sdk 实现代码遇到的问题申请key 微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如 ...
微信小程序调用腾讯地图，获取当前位置得到数据有偏差以及不同软件，不同坐标之间的转换Gcoord
前言: 在微信小程序中调用腾讯本家地图后,发现有偏差,而且距离还不小,在找了很多资料后,发现网上的资料很多都是挂羊头卖狗肉,都是坐标轴之间的互转,比如腾讯的坐标和百度坐标之间的转换,还起的名字是解决小 ...
微信小程序使用腾讯地图获取当前地理位置
申请密钥腾讯地图地址 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 根据以下四步,配置好 request ,然后获取 ...
微信小程序-调用腾讯地图插件实现定点，路线规划，地铁图，服务拓展（逆地址解析，地点搜索）
实现流程实现思路使用工具基础介绍小程序结构介绍整体代码结构调用插件主页分析定点出行规划服务地铁图服务接口能力逆地址解析地点搜索注意问题问题仓库地址实现思路选择小程序 ...
uni-app开发微信小程序使用腾讯地图选点和城市选择器插件
文章目录前言效果图第一步.登录腾讯地图申请属于自己小程序的key 第二步.登录微信公众平台添加插件第三步.引入插件包,配置定位允许授权第四步.通过点击事件使用插件第五步.拿到插件接口返回的 ...
uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器
目录第一步:登录小程序公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key 第三步:找到腾讯地图的插件第四步:添加插件与允许授权第五步:使 ...
微信小程序调用腾讯地图选点
业务: 小程序中实现选择地址解决方案: 1.在小程序后台的设置>第三方设置>在插件管理中添加插件搜索>腾讯位置服务地图选点 2.插件引入后可以点击详情查看文档 (1)首先在app. ...
微信小程序 - 调用腾讯地图插件
1. 登录公众号平台 https://mp.weixin.qq.com/ 2. 设置->第三方服务->添加插件->输入插件名称->申请 3. 项目中使用 3.1 app.jso ...
微信小程序调用腾讯地图，点击选择并返回选择位置数据！
选择前选择位置选择后上代码:WXML <view class="cu-form-group border-bottom"><view class=" ...

【微信小程序】调用腾讯地图获取当前城市定位