小程序map组件三——polyline实战以及polyline踩坑经历

我是X大魔王

已于 2022-09-20 11:01:10 修改

阅读量1.2k

点赞数 1

分类专栏：微信小程序💡 文章标签：小程序 javascript 前端

于 2022-09-20 10:42:20 首次发布

转载必须声明

本文链接：https://blog.csdn.net/Xmumu_/article/details/126947304

版权

本文分享了在小程序中使用map组件的polyline功能的实际操作和遇到的难点。通过实例展示了从初始位置到目标地址的连线效果，详细介绍了代码实现过程，并特别指出在赋值polyline.points时的一个不易察觉的坑，即必须完整地重新赋值polyline才能使改变生效，否则会出现显示异常的问题。虽然官方未明确解释原因，但作者提供了有效的解决方案。

摘要由CSDN通过智能技术生成

说实话，搞这个polyline还是有一些坑🕳的，这篇博文也是跟着上次的，还没有看过上一篇的朋友可以去看看🐾🐾

在这里插入图片描述

效果展示

接着上一次的输入一个地址Demo，然后自动将你当前所在位置和你选择的地址连线

开始时，展示当前所在地
在这里插入图片描述
选择一个地址

在这里插入图片描述
最终效果

在这里插入图片描述

具体实现

下面有一些个人的信息大家记得要替换一下，比如map的自定义地图的key之类的

wxml

<view class="container">
  <van-button icon="star-o" type="info" bindtap="address">点击选择目的地址</van-button>

  <view class="detail" style="color: white;margin-top: 30rpx;padding-top: 10rpx;" wx:if="{
    {flag == true}}">
   <view>
      <text style=" left: 20rpx;font-weight: bolder;height: 300rpx;">你选择好的地址🌼</text>
   </view>
   <view>
    <text>地址：{
  {detailAddress.name}}</text>
   </view>
   <view>
    <text>详细地址：{
  {detailAddress.address}}</text>
   </view>
   <view>
    <text>所在省份：{
  {detailAddress.province}}</text>
   </view>
   <view>