前言:记录使用腾讯地图定位的逻辑思路讲解
以下内容会分为三部分讲解:
-
小程序调用微信API获取经纬度
-
小程序调用腾讯地图API地址转坐标解析
-
小程序调用腾讯地图API获取目的地交通线路
-
移动端H5调用微信API获取经纬度
-
移动端H5调用腾讯地图API逆地址解析
小程序调用微信API获取经纬度
小程序是使用HBuilder X开发软件,相关技术栈:vue2+uview+sass
使用uniapp自带的API:uni.getLocation获取当前所谓位置的经纬度
const that = this
uni.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, '腾讯地图')
})
}
以上内容均为本人项目上所遇到,点个赞呗
结束,祝各位前端老友前程似锦,升职加薪!!!!