微信小程序----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}}