【腾讯地图】【微信小程序】路线规划
站长
· 阅读数 11
【效果展示】
【官方文档】
【完善流程】
当前操作和官方文档操作有部分出入，多加了 demo 和获取本地位置。（和【腾讯地图】【微信小程序】地图选点有点区别）
1、插件申请； 2、申请应用（已学习《地图选点》可忽略）
插件申请；申请应用（点击展开）已学习《地图选点》可忽略第2步，第1步申请应用相似，上手快的也可忽略。
1. 插件申请（微信公众号申请插件使用）
两个申请路径
图片流程（点击展开）① 直接传送门《腾讯位置服务路线规划》 ② 直接登录微信公众号 -设置——》第三方设置——》插件管理——》添加插件——》搜索路线规划——》进行添加
插件管理出现
腾讯位置服务路线规划后,就是申请完成了。
2. 腾讯地图-申请应用
登录腾讯地图位置服务，进入后台后，点击
应用管理（左上角）——》我的应用——》创建应用（右上角）
>
-------
3. 申请 key 到应用中
完成 步骤2 申请应用后，需要新增 key 进行绑定微信小程序 添加 Key ——》 填写 Key 名称 ——》 勾选WebServiceAPI ——》输入微信小程序授权APP ID——》 添加
登录微信小程序（微信公众号）后，左边菜单找到 “设置”——》往下拉，找到“帐号信息”。
第一个显示的就是 AppID(小程序ID) ：wx58a64e5f22b13552 。
4. 引入插件 - 路线规划和设置定位授权（app.json文件）
注意，官方的 “routePlan” 是 1.0.18 版本，是需要更新到最新的 1.0.19 （下边已是最新）
"plugins": {
"chooseLocation": {
"version": "1.0.10",
"provider": "wx76a9a06e5b4e693e"
},
"routePlan": {
"version": "1.0.19",
"provider": "wx50b5593e81dd937a"
}
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
5. 编写页面代码，进行调试并启动使用
官方文档：lbs.qq.com/miniProgram… 官方的太不详细使用，这里进行多加了“亿”点点。
代码中带有注释，如遇不懂的欢迎评论区留言~
【roadWay.wxml 文件】
roadWay.wxml 文件（点击展开）<view style="text-align:center; display: flex;">
<button bindtap="optStartDot" data-id="startTxt">{{startTxt}}</button>
-
<button bindtap="optEndDot" data-id="endTxt">{{endTxt}}</button>
</view>
<view>
<radio-group bindchange="radioChange">
<view style="display: flex;text-align:center;">
<label style="display: flex;" wx:for="{{travelWayList}}" wx:key="{{item.value}}">
<radio value="{{item.value}}" checked="{{item.checked}}" />
<view>{{item.name}}</view>
</label>
</view>
</radio-group>
</view>
<view style="font-size: larger;font-weight: bold;">历史记录</view>
<view wx:if="{{historyList.length==0}}">
暂无记录（请进行添加地图选点）
</view>
<view wx:for="{{historyList}}" wx:key="item" wx:index="index" bindtap="goRoadWayHistory" data-id="{{index}}" style="border: 1px solid #d7dad7;">
<view style="color:rgb(13, 155, 20)">路线{{index + 1}}.（交通方式：{{item.optTravelWayName}}）</view>
<view>起点：<text style="color:green">{{item.startPoint.name}}（经度：{{item.startPoint.longitude}}，维度：{{item.startPoint.latitude}}）</text></view>
<view>终点：<text style="color:red">{{item.endPoint.name}}（经度：{{item.endPoint.longitude}}，维度：{{item.endPoint.latitude}}）</text></view>
</view>
<view style="position: absolute;bottom: 40rpx; left: 0;right: 0;margin: auto;">
<button bindtap="goRoadWay">路线规划</button>
</view>
【roadWay.js 文件】
roadWay.js 文件（点击展开）// pages/demo/roadWay/roadWay.js
const chooseLocation = requirePlugin('chooseLocation');
Page({
/**
* 页面的初始数据
*/
data: {
startTxt: "选择起点", // 起点内容
endTxt: "选择终点", // 终点内容
optTxt: "", // 选择的点（起点还是终点）
startPoint: null, // 起点信息
endPoint: null, // 终点信息
travelWayList: [{ // driving（驾车）、transit（公交）、walking（步行）
value: 'driving',
name: '驾车',
checked: 'true',
},
{
value: 'transit',
name: '公交',
},
{
value: 'walking',
name: '步行',
},
],
historyList: [], // 历史记录
optTravelWay: "driving", // 出行方式（默认驾车）
},
radioChange(e) {
let that = this;
// console.log('radio发生change事件，携带value值为：', e.detail.value)
var {
travelWayList,
optTravelWay
} = that.data
optTravelWay = e.detail.value;
for (let i = 0, len = travelWayList.length; i < len; ++i) {
travelWayList[i].checked = travelWayList[i].value === optTravelWay;
}
that.setData({
travelWayList,
optTravelWay,
})
},
getTravelWayName(optTravelWay) {
let that = this;
var {
travelWayList,
} = that.data
var name = "其他";
for (let i = 0, len = travelWayList.length; i < len; ++i) {
if (travelWayList[i].value == optTravelWay) {
name = travelWayList[i].name;
break;
}
}
return name;
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// this.initLocal();
},
showMsy(msg) {
wx.showToast({
title: msg,
icon: 'none',
})
},
goRoadWay(e) {
let that = this;
var {
startPoint,
endPoint,
optTravelWay,
historyList,
} = that.data;
if (!startPoint) {
console.log("未选择起点");
that.showMsy("未选择起点");
return;
}
if (!endPoint) {
console.log("未选择终点")
that.showMsy("未选择终点");
return;
}
that.initRoadWay(startPoint, endPoint, optTravelWay);
var optTravelWayName = that.getTravelWayName(optTravelWay);
var history = {
startPoint,
endPoint,
optTravelWay,
optTravelWayName,
}
historyList.push(history);
console.log("路线规划历史列表", historyList)
that.setData({
historyList,
})
},
// 历史记录跳转
goRoadWayHistory(e) {
let that = this;
var {
historyList,
} = that.data;
console.log(e, historyList)
var history = historyList[e.currentTarget.dataset.id];
that.initRoadWay(history.startPoint, history.endPoint, history.optTravelWay);
},
// 初始化路线规划
initRoadWay(startPoint, endPoint, optTravelWay) {
let plugin = requirePlugin('routePlan');
let key = 'VVWBZ-YSXCA-Z4IKU-CSKLK-STFAH-7PFZV'; // 使用在腾讯位置服务申请的 key
let referer = '路线规划'; // 调用插件的app的名称
var url = 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + JSON.stringify(endPoint) + "&startPoint=" + JSON.stringify(startPoint) + "&mode=" + optTravelWay;
wx.navigateTo({
url,
});
},
optStartDot(e) {
let that = this;
that.setData({
optTxt: "startTxt",
})
// console.log("选择起点", e)
that.optDotCommon(e);
},
optEndDot(e) {
let that = this;
that.setData({
optTxt: "endTxt",
})
// console.log("选择终点", e)
that.optDotCommon(e);
},
optDotCommon(e) {
// console.log(e)
wx.getLocation({ // 返回当前的经度、纬度
type: 'gcj02',
success: function (res) {
// console.log(res)
var latitude = res.latitude
var longitude = res.longitude
const key = 'NE6BZ-ECCKA-FBFKU-CHTRS-OVSAJ-WNBVF'; //使用在腾讯位置服务申请的key
const referer = '地图选点'; //调用插件的app的名称
const location = JSON.stringify({ // 初始地址
latitude,
longitude,
});
const category = '生活服务,娱乐休闲';
wx.navigateTo({
url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category
});
},
fail: function (err) {
console.log("err", err)
}
});
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function (e) {
console.log("是否返回", e)
let that = this;
const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
if (!location) {
// 为空置空且直接返回即可
that.setData({
optTxt: "",
})
return;
}
// console.log(location, e);
// return;
var {
startTxt,
endTxt,
startPoint,
endPoint,
optTxt,
} = that.data;
if (optTxt == "startTxt") {
startPoint = location;
startTxt = location.name;
} else if (optTxt == "endTxt") {
endPoint = location;
endTxt = location.name;
}
that.setData({
startTxt,
endTxt,
startPoint,
endPoint,
})
},
})
【源码地址】（等待上传）
文章小尾巴
文章小尾巴（点击展开）文章写作、模板、文章小尾巴可参考：《写作“小心思”》 感谢你看到最后，最后再说两点~ ①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。 ②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~ 我是南方者，一个热爱计算机更热爱祖国的南方人。 （文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）