地图圈系统——微信小程序（5）
一、腾讯位置服务路线规划api
提供路线规划能力。
1.驾车（driving）：支持结合实时路况、少收费、不走高速等多种偏好，精准预估到达时间（ETA）；
2.步行（walking）：基于步行路线规划。
3.骑行（bicycling）：基于自行车的骑行路线；
4.公交（transit）：支持公共汽车、地铁等多种公共交通工具的换乘方案计算；
options属性说明：
driving其他参数：
transit其他参数：
driving返回结果：
walking返回结果：
bicycling返回结果：
二、结果响应实例
{
"status":0, //状态码，正常为0
"message":"query ok", //状态说明
"result": //搜索结果
{
"routes":[ //路线方案
//方案1*******************************************
{
"distance": 20123, //方案整体距离（米）
"duration": 75, //方案估算时间（分钟）
"duration_1m":75,
"bounds": "40.014309000000004,116.285706,40.15301,116.318099", //路线bounds，用于显示地图时使用
"steps": [ //具体方案，按交通工具的换乘分段
{
"mode": "WALKING", //阶段路线交通方式（WALKING）
"tag": "INTERNAL", //返回值仅支持INTERNAL，代表站内换乘
"distance": 760, //阶段路线距离
"duration": 11, //阶段路线估算时间
"direction": "东", //阶段路线方向
"polyline": [40.014634, 116.312869, -135, 160, -90, 100, -40, 80,... ...], //阶段路线点串(该点串经过压缩，解压请参考：polyline 坐标解压)
"steps": //分段
[{
"instruction": "步行454米,左转进入中关村北大街", //阶段路线描述
"polyline_idx": [0, 31],//在polyline位置
"road_name": "", //路名
"dir_desc": "东南", //方向
"distance": 454, //距离
"act_desc": "左转" //末尾动作
},
{
... ...
}]
},
{
"mode": "TRANSIT",
"lines": [ //lines指同一段路，三种出行方式
{
"vehicle": "BUS", //交通工具：公交车（BUS）
"id": "7225403257131337003",
"title": "717", //公交名
"station_count": 7, //途径站数
"price": 2, //票价
"destination":{
"id":"5047847604295657152",
"title":"地铁西二旗站" //终点站
},
"start_time":"05:30", //首班车时间
"end_time":"22:00", //末班车时间
"distance": 4560, //距离
"duration": 26, //估算时间
"polyline": [40.016124, 116.317759, 423, -241, 321, -214, 410, -323, 378, ... ...], //阶段路线坐标点串(该点串经过压缩，解压请参考：polyline 坐标解压)
"geton": { //上车站
"id": "10640224892745223512",
"title": "圆明园东门", //上车站名
"location": { //上车站坐标
"lat": 40.016124, //纬度
"lng": 116.317759 //经度
}
},
"getoff": { //下车站
"id": "5047847604295657152",
"title": "地铁西二旗站", //下车站名
"location": { //下车站坐标
"lat": 40.053226, //纬度
"lng": 116.304718 //经度
}
},
"stations": [ //途经站
{
"id": "17005795237013591570",
"title": "北京体育大学", //途经站名
"location": { //途经站坐标
"lat": 40.021902, //纬度
"lng": 116.314189 //经度
}
},
{
... ...
}
]
}
]
},
{
"mode": "WALKING", //阶段路线交通方式（WALKING）
"distance": 170, //阶段路线距离
"duration": 3, //阶段路线估算时间
"direction": "东", //阶段路线方向
"polyline": [40.053263, 116.304691, 66, 158, 10, 50, 0, 50,... ...], //阶段路线点串(该点串经过压缩，解压请参考：polyline 坐标解压)
"steps": //分段
[{
"instruction": "步行28米,左后转", //阶段路线描述
"polyline_idx": [0, 9], //在polyline位置
"road_name": "", //路名
"dir_desc": "东北", //方向
"distance": 28, //距离
"act_desc": "左后转" //末尾动作
},
{
... ...
}]
},
{
"mode":"TRANSIT",
"lines":[
{
"vehicle": "SUBWAY", //交通工具：地铁（SUBWAY）
"id": "6754388447601197938",
"title": "地铁昌平线", //地铁名
"station_count": 4, //经停站数
"price": 5, //阶段路线所花费用
"destination":{ //地铁终点站（用于指示方向）
"id":"5906130352814166149",
"title":"昌平西山口"
},
"start_time":"05:50", //末班车时间
"end_time":"23:05", //末班车时间
"distance":13569,
"duration":27, //阶段路线估算时间
"polyline": [40.052861, 116.306361, 1204, -672, 4714, -2712, 2866, -1811, ... ...], //阶段路线坐标点串(该点串经过压缩，解压请参考：polyline 坐标解压)
"geton": { //阶段路线上车站
"id": "7710841192752225287",
"title": "西二旗", //阶段路线上车站名
"location": { //阶段路线上车车站坐标
"lat": 40.052861, //纬度
"lng": 116.306361 //经度
},
"exit":{
"id":5331673106458131000,
"title":"A1口(北口)"
}
},
"getoff": { //阶段路线下车站
"id": "5906130352814166149",
"title": "沙河", //阶段路线下车站名
"location": { //阶段路线下车站坐标
"lat": 40.148216, //纬度
"lng": 116.288868 //经度
},
"exit":{
"id":1125299843369869000,
"title":"B1口(东口)"
}
},
"stations": //经停站
[{
"id": "16352832121503765012",
"title": "生命科学园", //经停站名
"location": { //经停站坐标
"lat": 40.094756, //纬度
"lng": 116.294197 //经度
}
}
{
... ...
}]
}
]
}
... ...
]
},
//方案2******************************************
{
"distance":20009,
"duration":85,
"bounds":"40.014309000000004,116.285706,40.152254,116.318099",
"steps":
... ...
},
//方案3*******************************************************************
{
"distance":22707,
"duration":90,
"bounds":"40.014309000000004,116.262268,40.15301,116.341639",
"steps":
... ...
}
... ...
]
}
}
三、项目代码
route-plan.wxml文件：
<!--pages/plugin/route-plan.wxml-->
<navBar
title-text="导航"
back-icon="../../src/images/back@3x.png"
background="#f2f2f2"
bindback="back"/>
<view class="map-view-container">
<!-- <view class="map-view-content">
<view class="introduce">腾讯位置服务路线规划插件提供路线规划等功能，根据起终点，多种出行方式智能规划最佳出行路线及详情。开发者可以将路线规划插件嵌入到自建小程序的页面里，实现路线规划功能。</view>
</view> -->
<view class="feature-container">
<view class="feature-content border-bottom border-top">
<text class="feature-label">起点位置</text>
<view class="feature-txt" bindtap="onChooseStartPoint">
<text wx:if="{{!startPoint}}">获取选点</text>
<text class="active" wx:else>{{startPoint.name}}</text>
<image class="right-arrow" src="{{imgs.rightArrow}}"></image>
</view>
</view>
<view class="feature-content border-bottom">
<text class="feature-label">终点位置</text>
<view class="feature-txt" bindtap="onChooseEndPoint">
<text wx:if="{{!endPoint}}">获取选点</text>
<text class="active" wx:else>{{endPoint.name}}</text>
<image class="right-arrow" src="{{imgs.rightArrow}}"></image>
</view>
</view>
<view class="feature-content border-bottom">
<text class="feature-label">出行方式</text>
<view class="feature-txt">
<view
bindtap="onSelectMode"
class="{{modeIndex === index ? 'active feature-txt-item' : 'feature-txt-item'}}"
data-index="{{index}}"
wx:for="{{modes}}">
{{item.text}}
</view>
</view>
</view>
<view class="feature-content border-bottom">
<text class="feature-label">显示导航</text>
<switch
class="feature-switch"
color="#3875FF"
checked="{{isNavigate}}"
bindchange="onChangeNavigate">
</switch>
</view>
<view class="feature-content" bindtap="onTriggerActionsheet">
<text class="feature-label">个性地图</text>
<view class="feature-txt">
<image wx:if="{{customStyles[keyIndex].icon}}" class="custom-icon" src="{{customStyles[keyIndex].icon}}"></image>{{customStyles[keyIndex].text}}<image class="right-arrow" src="{{imgs.rightArrow}}"></image>
</view>
</view>
</view>
<view class="primary-btn mt30" bindtap="onWatchDemo">
查看导航
</view>
<!-- <view class="doc-btn mt20" bindtap="onWatchDoc">
查看接入文档
</view> -->
<mp-actionsheet
bindactiontap="onSelectCustom"
ext-class="custom-actionsheet"
show="{{showCustomActionsheet}}"
actions="{{customStyles}}">
</mp-actionsheet>
</view>
route-plan.js文件：
// pages/plugin/route-plan.js
import {CDN_PATH, MOYUAN_KEY, BAIQIAN_KEY, YULU_KEY, DIFUNI_KEY, REFERER} from '../../config/appConfig';
var app = getApp();
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk;
Page({
data: {
imgs: {
rightArrow: `${CDN_PATH}/iconArrowRight@3x.png`
},
modes: [
{text: '驾车', value: 'driving'},
{text: '公交', value: 'transit'},
{text: '步行', value: 'walking'}
],
modeIndex: 0,
startPoint: null,
endPoint: null,
isNavigate: false,
showCustomActionsheet: false,
customStyles: [
{text: '墨渊', value: MOYUAN_KEY, icon: `${CDN_PATH}/iconMapMoyuan@3x.png`},
{text: '白浅', value: BAIQIAN_KEY, icon: `${CDN_PATH}/iconMapBaiqian@3x.png`},
{text: '玉露', value: YULU_KEY, icon: `${CDN_PATH}/iconMapYulu@3x.png`},
{text: '自定义', value: DIFUNI_KEY}
],
keyIndex: 0
},
onLoad: function(options){
console.log(options)
if(options.type==1){
var startPoint = JSON.parse(options.startPoint)
this.setData({
startPoint,
})
}else{
var startPoint = JSON.parse(options.startPoint)
var endPoint=JSON.parse(options.endPoint)
this.setData({
startPoint,
endPoint,
})
}
},
onChooseStartPoint () {
wx.chooseLocation({
success: (res) => {
console.log(res)
this.setData({
startPoint: res
});
}
});
},
onChooseEndPoint () {
wx.chooseLocation({
success: (res) => {
this.setData({
endPoint: res
});
}
});
},
onSelectMode (event) {
const {index} = event.currentTarget.dataset;
if (index === this.data.modeIndex) {
return;
}
this.setData({
modeIndex: index
});
},
onTriggerActionsheet () {
this.setData({
showCustomActionsheet: true
});
},
onSelectCustom (event) {
const {index} = event.detail;
this.setData({
keyIndex: index,
showCustomActionsheet: false
});
},
onWatchDemo () {
if (!this.data.endPoint) {
wx.showToast({
title: '请选择终点位置',
icon: 'none',
duration: 1500,
mask: false
});
return;
}
const key = this.data.customStyles[this.data.keyIndex].value;
const referer = REFERER;
const endPoint = JSON.stringify(this.data.endPoint);
const startPoint = this.data.startPoint ? JSON.stringify(this.data.startPoint) : '';
const mode = this.data.modes[this.data.modeIndex].value;
const navigation = this.data.isNavigate ? 1 : 0;
let url = 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint +
'&mode=' + mode + '&navigation=' + navigation;
if (startPoint) {
url += '&startPoint=' + startPoint;
}
wx.navigateTo({
url
});
},
onWatchDoc () {
wx.navigateTo({
url: '../document/document?type=routePlan'
});
},
onChangeNavigate (event) {
this.setData({
isNavigate: event.detail.value
});
},
onShareAppMessage: function () {
}
});
route-plan.wxss文件：
/* pages/plugin/route-plan.wxss */
.map-view-container {
display: flex;
flex-direction: column;
box-sizing: border-box;
background: #F8F8F7;
width: 100%;
height: 100%;
}
.map-view-content {
background: #FFF;
padding:20px 20px 0;
margin-top: 10px;
}
.feature-container {
padding-left: 20px;
background: #fff;
}
.feature-content {
padding-right: 20px;
}
.custom-icon {
margin-right: 5px;
width: 24px;
height: 24px;
}
.control-btn-increase {
top:73px;
}
.control-btn-decrease {
bottom: 72px;
}
.active {
color: #222;
font-weight: 500;
}
.feature-txt-left {
padding-right: 15px;
}
.feature-txt-left:after {
content: '';
height:10px;
width:5px;
background: rgba(34,34,34,0.1);
}
.feature-txt-right {
padding-left: 15px;
}
.custom-actionsheet .weui-actionsheet__menu .weui-actionsheet__cell {
font-size: 0;
}
.custom-actionsheet .weui-actionsheet__menu .weui-actionsheet__cell::after {
box-sizing: border-box;
position: absolute;
height: 24px;
font-size: 16px;
padding-left: 30px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.custom-actionsheet .weui-actionsheet__menu .weui-actionsheet__cell:nth-child(1)::after {
content: '墨渊';
background: url(https://3gimg.qq.com/lightmap/xcx/demoCenter/images/iconMapMoyuan@3x.png) left center no-repeat;
background-size: 24px 24px;
}
.custom-actionsheet .weui-actionsheet__menu .weui-actionsheet__cell:nth-child(2)::after {
content: '白浅';
background: url(https://3gimg.qq.com/lightmap/xcx/demoCenter/images/iconMapBaiqian@3x.png) left center no-repeat;
background-size: 24px 24px;
}
.custom-actionsheet .weui-actionsheet__menu .weui-actionsheet__cell:nth-child(3)::after {
content: '玉露';
background: url(https://3gimg.qq.com/lightmap/xcx/demoCenter/images/iconMapYulu@3x.png) left center no-repeat;
background-size: 24px 24px;
}
.custom-actionsheet .weui-actionsheet__menu .weui-actionsheet__cell:nth-child(4)::after {
content: '自定义';
padding-left: 0;
}
四、效果展示
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
