前言:记录使用腾讯地图定位的逻辑思路讲解
以下内容会分为三部分讲解:
小程序调用微信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地址转坐标解析
首先需要申请密钥:/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 = 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)//路线详细信息
//此处取你所需,以下是我提取的详细路线(细节有待完善)
constret=res
//驾车路线
constdrivingRoutre=ret.result.routes[0].polyline
pl=[]
// 坐标解压(返回的点串坐标,通过前向差分进行压缩)
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.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
地址链接:/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./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及腾讯地图实例 获取当前位置 逆地址解析 路线规划 地图展示