高德地图小程序步行路线显示_微信小程序使用map组件实现路线规划功能示例

本文实例讲述了微信小程序使用map组件实现路线规划功能。分享给大家供大家参考，具体如下：

效果图

实现原理

1. 通过map组件标记起始点和绘制路线图；

2. 通过高德地图API获取不同类型的路线坐标点，以及耗费时间和路程。

WXML

驾车

步行

公交

骑行

{ {item.name}}

路程：{ {distance}}米

耗时：{ {cost}}分钟

详情

WXSS

.flex-style{

display: -webkit-box;

display: -webkit-flex;

display: flex;

}

.flex-item{

height: 35px;

line-height: 35px;

text-align: center;

-webkit-box-flex: 1;

-webkit-flex: 1;

flex: 1

}

.flex-item.active{

color:#0091ff;

}

.map_box{

position:absolute;

top: calc(35px + 80rpx);

bottom: 0px;

left: 0px;

right: 0px;

}

.map_box.active{bottom: 90px;}

#navi_map{

width: 100%;

height: 100%;

}

.text_box{

position:absolute;

height: 90px;

bottom: 0px;

left: 0px;

right: 0px;

}

.text_box .text{

margin: 15px;

color: lightseagreen;

}

.detail_button{

position:absolute;

bottom: 30px;

right: 10px;

padding: 3px 5px;

color: #fff;

background: #0091ff;

width:50px;

text-align:center;

border-radius:5px;

}

.map-inputtips-input{

height: 80rpx;

line-height: 80rpx;

width: 100%;

box-sizing: border-box;

font-size: 30rpx;

padding: 0 10px;

background-color: #fff;

position: fixed;

top: 35px;

left: 0;

z-index: 1000;

border-bottom:1px solid #c3c3c3;

}

.map-