微信小程序使用map组件实现路线规划功能示例

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

效果图

实现原理

1. 通过map组件标记起始点和绘制路线图；
2. 通过高德地图API获取不同类型的路线坐标点，以及耗费时间和路程。

WXML

<view class="flex-style"> <view class="flex-item {{status == 'car' ? 'active' : ''}}" data-status="car" bindtouchstart="goTo">驾车</view> <view class="flex-item {{status == 'walk' ? 'active' : ''}}" data-status="walk" bindtouchstart="goTo">步行</view> <view class="flex-item {{status == 'bus' ? 'active' : ''}}" data-status="bus" bindtouchstart="goTo">公交</view> <view class="flex-item {{status == 'ride' ? 'active' : ''}}" data-status="ride" bindtouchstart="goTo">骑行</view></view><view class="map-inputtips-input"> <input bindinput="bindInput" placeholder="输入终点" focus="true" /></view><view class="map-search-list {{isShow ? '' : 'map-hide'}}"> <view bindtouchstart="bindSearch" wx:key="searchId" data-keywords="{{item.name}}" data-location="{{item.location}}" class="map-box" wx:for="{{tips}}">  {{item.name}} </view></view><view class="map_box {{detailStatus ? 'active' : ''}}"> <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" include-points='{{points}}' markers="{{markers}}" polyline="{{polyline}}"></map></view><view class="text_box {{detailStatus ? '' : 'map-hide'}}"> <view class="text">路程：{{distance}}米</view> <view class="text">耗时：{{cost}}分钟</view> <view class="detail_button" bindtouchstart="goDetail">详情</view></view>

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-inputtips-input input{ border: 1px solid #ddd; border-radius: 5px; height: 60rpx; line-height: 60rpx; width: 100%; box-sizing: border-box; padding: 0 5px; margin-top: 10rpx;}.map-box{ margin: 0 10px; border-bottom:1px solid #c3c3c3; height: 80rpx; line-height: 80rpx;}.map-box:last-child{border: none;}.map-search-list{ position: fixed; top: calc(80rpx + 35px); left: 0; width: 100%; z-index: 1000; background-color: #fff;}