微信小程序地图实现展示路线路

效果图：

思路：

1、首先获取一系列的坐标点，然后将这些坐标从头到尾链接起来。（参考微信小程序地图组件polyline属性）

2、在获取的坐标点上标注某一个位置，实现打点。（参考微信小程序地图组件marker属性 ） 

3、使用map组件

微信小程序地图组件api地址：https://developers.weixin.qq.com/miniprogram/dev/component/map.html

下面直接展示代码：

wxml:

<view class="page-section page-section-gap">
  <!-- longitude="{
  {longitude}}" latitude="{
  {latitude}}" scale="16" height: {
  {view.Height}}px;show-location-->
    <map class="navi_map"  include-points='{
  {points}}' longitude="{
  {longitude}}" latitude="{
  {latitude}}" polyline="{
  {polyline}}" markers="{
  {markers}}" bindcallouttap="bindcallouttap" bindmarkertap="markertap" style="width: 100%; height: {
  {view.Height}}px;" wx:if="{
  {hasMarkers}}" scale="10" ></map>
  </view>
  <view class="maptext" wx:if="{
  {mapList!=''}}">
    <view  class="news">
        <view wx:if="{
  {mapList.polylineJson!=null}}">预计<text style="color