前言：记录使用腾讯地图定位的逻辑思路讲解
以下内容会分为三部分讲解：
小程序调用微信API获取经纬度
小程序调用腾讯地图API地址转坐标解析
小程序调用腾讯地图API获取目的地交通线路
移动端H5调用微信API获取经纬度
移动端H5调用腾讯地图API逆地址解析
小程序调用微信API获取经纬度
小程序是使用HBuilder X开发软件，相关技术栈：vue2+uview+sass
使用uniapp自带的API：uni.getLocation获取当前所谓位置的经纬度
const that = thisuni.getLocation({type: 'gcj02',success: function(res) {that.latitude = res.latitudethat.longitude=res.longitude}})
小程序调用腾讯地图API地址转坐标解析
首先需要申请密钥：/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
步骤：打开链接---注册---申请密钥---编辑---配置信息---WebServiceAPI（选择白名单：这个地址必须要加上：， 还有你的接口API）---勾选微信小程序填写AppID---登录小程序---开发（开发管理）填写信息：IP白名单、服务器接口、腾讯地图接口api---点击左边菜单设置---第三方设置（添加插件腾讯地图）
项目：打开manifest.json文件---选择小程序配置---设置权限配置
基本设置完成
JSSDK下载：下载JSSDK---打开腾讯地图---下载JSSDK放置项目中---页面引入
代码部分：
//引入下载好的JSSDK（看清楚路径）var QQMapWX = require('@/untils/qqmap-wx-jssdk.js');varqqmapsdk=newQQMapWX({key:'Y3MBZ-EJ56V-V2SPC-XXXX-XXXX-XXXXX'//腾讯地图创建的KEY密钥});//逆地址解析以：广东省深圳市龙园中心城吉祥中路588号为例getAddrss() {const _that = thisqqmapsdk.geocoder({address:'广东省深圳市龙园中心城吉祥中路588号',//地址必填region:'深圳市',//所属城市非必填sig:'6c9LCIGA6t2nEtBUG4XXXXXXXXX',//签名 非必填success: function(res) {},fail: function(res) {},complete: function(res) {//获取经纬度成功const latitude = res.result.location.latconst longitude = res.result.location.lng})}}
小程序调用腾讯地图API获取目的地交通线路
步骤：获取当前位置坐标(略)---获取目标位置坐标(略)---调用相关接口---解析数据
//获取当前位置坐标以及目标位置坐标，上边有写就略过// 调用计算距离接口qqmapsdk.direction({mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填from:form,//不填默认当前位置，出发地非必填to:to,//目的地 必填success: function(res) {},fail:function(res){},complete: function(res) {console.log(res)//路线详细信息//此处取你所需，以下是我提取的详细路线（细节有待完善）constret=res//驾车路线constdrivingRoutre=ret.result.routes[0].polylinepl=[]// 坐标解压（返回的点串坐标，通过前向差分进行压缩）const kr = 1000000；for(vari=2;i < drivingRoutre.length;i++ ) {drivingRoutre[i]=Number(drivingRoutre[i-2])+Number(drivingRoutre[i]) / kr}//将解压后的坐标放入点串坐标组pl中for(vari=0;i<drivingRoutre.length;i++){pl.push({latitude:drivingRoutre[i],longitude:drivingRoutre[i+1]})}//设置polyline属性，将路线显示出来，将解压坐标第一个数据作为起点_that.longitude = pl[0].longitude_that.latitude = pl[0].latitude_that.polyline = [{points:pl,color:'#4bc37b',width:4,iconPath:''//坐标点图}]}})
附上公交详细代码
_that.card = arr // 获取数组数组最外层便利constdistance=''//步行长度constduration=''//步行市场//constvia=[]//途经线路constreceive=[]constant=[]arr.forEach(item=>{item.steps.forEach(item=>{if(item.mode=='TRANSIT'){item.lines.forEach(item=>{_that.via=ant.push(item.title)//receive.push(item.title)//_that.via=receive.join('-')})}})})
截图效果
移动端H5调用微信API获取经纬度
安装依赖：/package/weixin-js-sdk
公众号设置：登录公众号---左侧设置与开发---公众号设置---设置业务域名、js安全域名
代码部分：安装依赖---引入---鉴权---调用微信API
//安装依赖 npm install weixin-js-sdk// 引入import wx from 'weixin-js-sdk'// 鉴权async signPackage () {constpageUrl=location.href.split('#')[0]//页面地址,即线上地址const res = await getSignPackage({ url: pageUrl })if (res.data.code == 200) {let config = res.data.datawx.config({debug: true, // 调试时候建议开启debugappId: config.appId, // 必填，公众号的唯一标识timestamp: config.timestamp, // 必填，生成签名的时间戳nonceStr: config.nonceStr, // 必填，生成签名的随机串signature: config.signature, // 必填，签名jsApiList: ['checkJsApi', 'getLocation'] // 必填，需要使用的JS接口列表 'checkJsApi',})// 检验调用的接口wx.ready(function () {wx.checkJsApi({jsApiList: ['getLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,success: function (res) {}})})}}
校验完成---调用相关API
getLocations(){const _this = thiswx.getLocation({type:'gcj02',// 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success:function(res){//接收_this.latitude = res1.latitude // 纬度，浮点数，范围为90 ~ -90_this.longitude = res1.longitude // 经度，浮点数，范围为180 ~ -180。}})}
移动端H5调用腾讯地图API逆地址解析
H5调用逆地址解析，调用的方法有点出入
vue调用腾讯API要使用JSONP
地址链接：/package/vue-jsonp
//根据获取到的坐标//安装npm install vue-jsonp --save//在main.js引入import{VueJsonp}from'vue-jsonp'Vue.use(VueJsonp)//调用formSubmit () {var _this = thisthis.$jsonp('https://apis./ws/geocoder/v1/?', {location: _this.latitude + ',' + _this.longitude, // 经纬度key:'HPIBZ-DU3LP-NDJDN-XXXX-XXXX-XXX',//创建应用的钥匙output: 'jsonp' // output必须jsonp 不然会超时}).then(res => {//console.log(res,'腾讯地图')})}
以上内容均为本人项目上所遇到，点个赞呗
结束，祝各位前端老友前程似锦，升职加薪！！！！
关于小程序移动端调用微信API及腾讯地图实例 获取当前位置 逆地址解析 路线规划 地图展示
