【愚公系列】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

相关文章
|
6月前
|
小程序 定位技术 API
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
【社区每周】小程序码支持沙箱调试;开发文档新增产品地图(1月第二期)
47 0
|
5月前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
108 1
|
5月前
|
XML 小程序 JavaScript
微信小程序如何使用地图
微信小程序如何使用地图
195 4
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
344 0
|
4月前
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
79 0
|
6月前
|
小程序 安全 定位技术
高德地图实现-微信小程序地图导航
高德地图实现-微信小程序地图导航
304 0
|
6月前
|
小程序 定位技术 API
微信小程序实现地图功能(腾讯地图)
微信小程序实现地图功能(腾讯地图)
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
215 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
48 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目