微信小程序地图实现展示线路的方法-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商，新人活动买多久送多久，划算不套路！

我们注重客户提出的每个要求，我们充分考虑每一个细节，我们积极的做好做网站、成都做网站服务，我们努力开拓更好的视野，通过不懈的努力，创新互联赢得了业内的良好声誉，这一切，也不断的激励着我们更好的服务客户。 主要业务：网站建设,网站制作,网站设计,重庆小程序开发,网站开发,技术开发实力，DIV+CSS，PHP及ASP，ASP.Net，SQL数据库的技术开发工程师。

这篇文章将为大家详细讲解有关微信小程序地图实现展示线路的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

效果图：

思路：

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

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

3、使用map组件

微信小程序地图组件api地址

下面直接展示代码：

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"  wx:if="{{hasMarkers}}" scale="10" ></map>
 </view>
 <view class="maptext" wx:if="{{mapList!=''}}">
  <view class="news">
    <view wx:if="{{mapList.polylineJson!=null}}">预计<text >{{now}}</text>送达</view>
    <view class="tishi">由药店提供配送服务</view>
  </view>
  <view class="phone_box">
    <view  class="right_box" data-phone="{{mapPhone}}" bindtap="makeCallPhone" wx:if="{{mapPhone!=null}}">
    <image src="{{imgUrl}}mapshop_phone.png"></image><view >联系商家</view>
   </view>
   <view class="left_box" data-deliverhone="{{deliverPhone}}" bindtap="makesCallPhone" wx:if="{{deliverPhone!=null}}">
    <image src="{{imgUrl}}map_phone.png"></image><view >联系配送员</view>
   </view>
  </view>
</view>