【腾讯地图】【微信小程序】路线规划

1. 插件申请（微信公众号申请插件使用）

两个申请路径

① 直接传送门《腾讯位置服务路线规划》

② 直接登录微信公众号 –设置——》第三方设置——》插件管理——》添加插件——》搜索路线规划——》进行添加

插件管理出现腾讯位置服务路线规划后,就是申请完成了。

2. 腾讯地图-申请应用

登录腾讯地图位置服务，进入后台后，点击应用管理（左上角）——》我的应用——》创建应用（右上角）

>——-

（前提：已有微信小程序，也就是申请微信公众号中的小程序。）

登录微信小程序（微信公众号）后，左边菜单找到 “设置”——》往下拉，找到“帐号信息”。

第一个显示的就是 AppID(小程序ID) ：wx58a64e5f22b13552 。

<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>

// 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,
})
},
})

文章写作、模板、文章小尾巴可参考：《写作“小心思”》
　　感谢你看到最后，最后再说两点~
　　①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
　　②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
　　　我是南方者，一个热爱计算机更热爱祖国的南方人。
　　（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）