【愚公系列】2022年04月 微信小程序-地图的使用之线聚合

简介: 【愚公系列】2022年04月 微信小程序-地图的使用之线聚合

前言

地图基础属性:

image.png

image.png

image.png

一、线聚合

1.wxml

<map id="mapp" latitude="37.48205260" longitude="121.44577861" scale="16" 
  show-compass="true"show-scale="true"  
  polyline="{{polyline}}">
</map>

2.js

Page({
  data: {
    polyline: [{
      points: [{
          longitude: 121.44577861,
          latitude: 37.48205260
        }, {
          longitude: 121.44611657,
          latitude: 37.48207388
        }, {
          longitude: 121.44725382,
          latitude: 37.48224841
        }, {
          longitude: 121.44766152,
          latitude: 37.48237186
        },{
          longitude: 121.4475274100,
          latitude: 37.4827039000
        },{
          longitude: 121.44748986,
          latitude: 37.48299336
        },{
          longitude: 121.4476454300,
          latitude: 37.4831679000
        },{
          longitude: 121.4478063600,
          latitude: 37.4831381000
        },{
          longitude: 121.4479565600,
          latitude: 37.4831295800
        },{
          longitude: 121.4480263000,
          latitude: 37.4831636400
        },{
          longitude: 121.44820869,
          latitude: 37.48330837
        }
      ],
      color: "#33c9FFDD",
      width: 3,
      dottedLine: true
    }]
  }
})

3.wxss

#mapp {
  height: 1000rpx; 
  width: 100%;
}

4.实际效果

image.png

相关文章
|
小程序 定位技术 API
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
183 0
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
528 1
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
988 4
|
小程序 安全 定位技术
高德地图实现-微信小程序地图导航
高德地图实现-微信小程序地图导航
2347 1
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
1841 0
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
566 0
|
小程序 定位技术 API
微信小程序实现地图功能(腾讯地图)
微信小程序实现地图功能(腾讯地图)
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
642 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
356 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
416 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目