效果图:
思路:
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