本文實例講述了微信小程序使用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;}