关于小程序移动端调用微信API及腾讯地图实例，获取当前位置、逆地址解析、路线规划、地图展示

前言：记录使用腾讯地图定位的逻辑思路讲解

以下内容会分为三部分讲解：

• 小程序调用微信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.latitude    that.longitude = res.longitude  }})

小程序调用腾讯地图API地址转坐标解析

首先需要申请密钥：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

步骤：打开链接---注册---申请密钥---编辑---配置信息---WebServiceAPI（选择白名单：这个地址必须要加上：servicewechat.com， 还有你的接口API）---勾选微信小程序填写AppID---登录小程序---开发（开发管理）填写信息：IP白名单、服务器接口、腾讯地图接口api---点击左边菜单设置---第三方设置（添加插件腾讯地图）

项目：打开manifest.json文件---选择小程序配置---设置权限配置

基本设置完成

JSSDK下载：下载JSSDK---打开腾讯地图---下载JSSDK放置项目中---页面引入

代码部分：

// 引入下载好的JSSDK（看清楚路径）var QQMapWX = require('@/untils/qqmap-wx-jssdk.js');var qqmapsdk = new QQMapWX({    key: 'Y3MBZ-EJ56V-V2SPC-XXXX-XXXX-XXXXX' // 腾讯地图创建的KEY密钥});// 逆地址解析 以：广东省深圳市龙园中心城吉祥中路588号为例getAddrss() {  const _that = this  qqmapsdk.geocoder({    address: '广东省深圳市龙园中心城吉祥中路588号', // 地址 必填    region: '深圳市', // 所属城市 非必填    sig: '6c9LCIGA6t2nEtBUG4XXXXXXXXX', // 签名 非必填    success: function(res) {},    fail: function(res) {},    complete: function(res) {      // 获取经纬度成功      const latitude = res.result.location.lat      const 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) // 路线详细信息    // 此处取你所需，以下是我提取的详细路线（细节有待完善）    const ret = res    // 驾车路线    const  drivingRoutre = ret.result.routes[0].polyline    pl = []    // 坐标解压（返回的点串坐标，通过前向差分进行压缩）    const kr = 1000000；    for (var i = 2;i < drivingRoutre.length;i++ ) {      drivingRoutre[i] = Number(drivingRoutre[i-2]) + Number(drivingRoutre[i]) / kr    }    // 将解压后的坐标放入点串坐标组pl中    for (var i = 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 // 获取数组数组最外层便利const distance = '' // 步行长度const duration = '' // 步行市场// const via  = [] // 途经线路const receive = []const ant = []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获取经纬度

安装依赖：https://www.npmjs.com/package/weixin-js-sdk

公众号设置：登录公众号---左侧设置与开发---公众号设置---设置业务域名、js安全域名

代码部分：安装依赖---引入---鉴权---调用微信API

// 安装依赖 npm install weixin-js-sdk// 引入 import wx from 'weixin-js-sdk'// 鉴权async signPackage () {  const pageUrl = location.href.split('#')[0] // 页面地址,即线上地址  const res = await getSignPackage({ url: pageUrl })  if (res.data.code == 200) {    let config = res.data.data    wx.config({      debug: true, // 调试时候建议开启debug      appId: 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 = this  wx.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

地址链接：https://www.npmjs.com/package/vue-jsonp

// 根据获取到的坐标// 安装npm install vue-jsonp --save// 在main.js引入import {VueJsonp} from 'vue-jsonp'Vue.use(VueJsonp)// 调用formSubmit () {  var _this = this  this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?', {    location: _this.latitude + ',' + _this.longitude, // 经纬度    key: 'HPIBZ-DU3LP-NDJDN-XXXX-XXXX-XXX', // 创建应用的钥匙    output: 'jsonp' // output必须jsonp   不然会超时  }).then(res => {    // console.log(res, '腾讯地图')  })}

以上内容均为本人项目上所遇到，点个赞呗

结束，祝各位前端老友前程似锦，升职加薪！！！！