uni-app开发小程序中遇到的map地图的点聚合以及polygon划分区域问题

写一篇文章来记录以下我在开发小程序地图过程中遇到的两个小坑吧,一个是点聚合,用的是joinCluster这个指令,另一个是polygon在地图上划分多边形的问题:

1.首先说一下点聚合问题,由于之前没有做过小程序地图问题,所以浏览了很多资料,最终发现看的多了反而杂乱,而且这次要完成的不是地图单点定位或者地图导航,而是地图撒点,在地图上要显示很多定位点,那么点数过多且覆盖就成了一个要解决的问题,我上网搜了大量的资料,要么自己手写,要么引入很多其它组件方式看起来比较复杂,直接说最简单的结论,在撒的markers点内部直接加一个joinCluster: true即可,藏在官方文档marker介绍下的最下面:

 

然后最坑的来了,加了这个之后会发现微信开发者工具里面缩放地图并没有反应,无论缩放地图与否,都不会聚合,实际上这是开发者工具的问题,它是一个模拟器不能完全实现手机小程序上的所有功能,这时候如果打开真机调试或者二维码预览即可发现点聚合功能是可以实现的,下面给大家一段代码:

<template><view class="base_body"><map :markers="markers" id="map1" style="width: 100%; height: 100vh;" :latitude="latitude":longitude="longitude"><cover-view slot="callout"><block v-for="(item,index) in markers" :key="index"><cover-view class="customCallout" :marker-id="item.id"><cover-view class="content">{{item.title}}</cover-view></cover-view></block></cover-view></map></view>
</template><script>export default {data() {return {map: '',latitude: 39.890, // 地图默认显示的维度longitude: 116.39752, // 地图默认显示的纬度markers: [{ // 标记点id: 1,latitude: 39.890,longitude: 116.39752,title: "点击提示1",joinCluster: true,}, {id: 2,latitude: 39.891,longitude: 116.39752,title: "点击提示2",joinCluster: true,}, {id: 3,latitude: 39.892,longitude: 116.39752,title: "点击提示3",joinCluster: true,}, {id: 4,latitude: 39.893,longitude: 116.39752,title: "点击提示4",joinCluster: true,}, ],}},onLoad() {},onReady() {},methods: {}}
</script><style>.base_body {width: 100%;height: 100%;position: absolute;}/* 水平,垂直居中 */.base_all_center {justify-content: center;align-items: center;}/* 垂直居中 */.base_center_vertical {display: flex;align-items: center;}/* 水平居中 */.base_center_horizontal {display: flex;justify-content: center;}/* 垂直布局 */.base_column {display: flex;flex-direction: column;}/* 横向布局 */.base_row {display: flex;flex-direction: row;}/* 基础dialog */.base_dialog {width: 100%;height: 100%;position: absolute;top: 0px;background: rgba(0, 0, 0, 0.5);}.customCallout {box-sizing: border-box;background-color: #fff;border: 1px solid #ccc;border-radius: 30px;width: 150px;height: 40px;display: inline-flex;padding: 5px 20px;justify-content: center;align-items: center;}.content {flex: 0 1 auto;margin: 0 10px;font-size: 14px;}
</style>

这一段代码不需要有任何修改,直接新建一个demo页面然后复制进去直接运行到微信小程序,之后启动真机调试即可发现点聚合功能是实现了的,更多细节大家可以自行了解。

2.第二个问题是划分多边形的问题,我查阅了微信官方文档上面说使用polygon即可:

 于是我使用了,但是无论我怎么填写数据都没用,一度怀疑自我,这时候发现还是要以uni-app官方文档为准,我死磕微信开发文档导致自己怀疑自我,两者有所区别,这是uni-app官方文档的介绍:

 没错,uni-app官方文档显示应该加一个s,用的是polygons,所以仅仅加一个s即可,非常搞心态,而且即使是uni-app官网下方对于这个的介绍也没加s:

下面也给大家一段代码是划了一个多边形,和上面一样,直接复制代码进去运行即可,不需要修改其它东西 :

<template><view class="base_body"><map :polygons="polygon" id="map1" style="width: 100%; height: 100vh;" :latitude="latitude":longitude="longitude"><cover-view slot="callout"><block v-for="(item,index) in markers" :key="index"><cover-view class="customCallout" :marker-id="item.id"><cover-view class="content">{{item.title}}</cover-view></cover-view></block></cover-view></map></view>
</template><script>export default {data() {return {map: '',latitude: 39.890, // 地图默认显示的维度longitude: 116.39752, // 地图默认显示的纬度polygon: [{points: [{latitude: 39.890,longitude: 116.39752},{latitude: 39.891,longitude: 116.39852},{latitude: 39.892,longitude: 116.39852},{latitude: 39.893,longitude: 116.39752},],strokeWidth: "2",strokeColor: "#2223FD",fillColor: "#9FA4F6"}, ],}},}
</script><style>.base_body {width: 100%;height: 100vh;position: absolute;}/* 水平,垂直居中 */.base_all_center {justify-content: center;align-items: center;}/* 垂直居中 */.base_center_vertical {display: flex;align-items: center;}/* 水平居中 */.base_center_horizontal {display: flex;justify-content: center;}/* 垂直布局 */.base_column {display: flex;flex-direction: column;}/* 横向布局 */.base_row {display: flex;flex-direction: row;}/* 基础dialog */.base_dialog {width: 100%;height: 100%;position: absolute;top: 0px;background: rgba(0, 0, 0, 0.5);}.customCallout {box-sizing: border-box;background-color: #fff;border: 1px solid #ccc;border-radius: 30px;width: 150px;height: 40px;display: inline-flex;padding: 5px 20px;justify-content: center;align-items: center;}.content {flex: 0 1 auto;margin: 0 10px;font-size: 14px;}
</style>

最终结果就是显示一块多边形:

先说这么多,后续遇到什么问题我会继续上传的,诸君共勉。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/115404.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Cookie和Session的那些事儿】

&#x1f320;作者&#xff1a;TheMythWS. &#x1f386;专栏&#xff1a;《集合与数据结构》 &#x1f387;座右铭&#xff1a;不走心的努力都是在敷衍自己&#xff0c;让自己所做的选择&#xff0c;熠熠发光。 目录 认识Cookie和Session Cookie Cookie对象的特点 Cookie对…

QTday3(QT实现文件对话框保存操作、实现键盘触发事件【WASD控制小球的移动】)

1.实现文件对话框保存操作 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }void Widget::on_fontBtn_clicked() {//调用QFo…

数据库访问性能优化

目录 IO性能分析数据库性能优化漏斗法则1、减少数据访问&#xff08;减少磁盘访问&#xff09;(1) 正确的创建并使用索引索引生效场景索引失效场景判断索引是否生效--执行计划 2、返回更少数据&#xff08;减少网络传输或磁盘访问&#xff09;(1) 数据分页处理(减少行数)客户端…

shell bash中设置命令set

1 Preface/Foreword set命令用于shell脚本在执行命令时候&#xff0c;遇到异常的处理机制。 2 Usage 2.1 set -e 当执行命令过程中遇到异常&#xff0c;那么就退出脚本&#xff0c;不会往下执行其它命令。 #!/bin/bash #set -eroot GIT_TAG${CI_BUILD_TAG-NOTAG} GIT_REV…

叮!你的 AI安全“秘籍”已送达,请签收

2023年初&#xff0c;全球生成式 AI 产业迎来了爆发式增长&#xff0c;大量AI产品和应用纷纷落地&#xff0c;让用户深度感知AI的魅力。预计到2032年&#xff0c;生成式AI市场的营收规模将从2022年的400亿美元增长至1.3万亿美元。 就在大量用户“尝鲜”生成式 AI 时&#xff0…

——滑动窗口

滑动窗口 所谓滑动窗口&#xff0c;就是不断的调节子序列的起始位置和终止位置&#xff0c;从而得出我们要想的结果。也可以理解为一种双指针的做法。 leetcode76 class Solution {public String minWindow(String s, String t) {char[] schars s.toCharArray();char[] tc…

极氪汽车的云资源治理细探

作者&#xff1a;极氪汽车吴超 前言 2021 年&#xff0c;极氪 001 迅速崭露头角&#xff0c;仅用 110 天便创下了首款车型交付量“最快破万”的纪录。2022 年 11 月&#xff0c;极氪 009 在短短 76 天内便率先完成了首批交付&#xff0c;刷新了中国豪华纯电品牌交付速度的纪录…

设计模式—策略模式

目录 一、定义 二、特点 三、优点 四、缺点 五、实例 六.涉及到的知识点 1、一个类里面有哪些东西&#xff1f; 2、类和实例 什么是类&#xff1f; 什么是实例&#xff1f; 什么是实例化&#xff1f; 3、字段和属性 什么是字段&#xff1f; 属性是什么&#xff1…

PXE 装机(五十)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、PXE是什么 二、PXE的组件 三、配置vsftpd 四、配置tftp 五、准备pxelinx.0文件、引导文件、内核文件 ​六、配置dhcp 七、创建default文件 八、配置pxe无人值守…

【浏览器】端数据库存储方案----indexDB、localForage

浏览器存储 localStoragelocalforageIndexDB localStorage 说到本地存储数据&#xff0c;首先想到的是 localStorage&#xff0c;应该很多小伙伴都用过&#xff0c;使用很简单。然而&#xff0c;localStorage 却有下面一些缺点&#xff1a; 存储容量限制&#xff0c;大部分浏…

使用axi_quad_spi操作spi_flash

文章目录 基本测试情况IP支持的命令 基本测试情况 有spi_flash需要访问&#xff0c;为简单计&#xff0c;选择使用axi_quad_spi进行操作。开始时&#xff0c;将IP配置成如下参数&#xff0c; 这样配置&#xff0c;是想着能够适应各家的FLASH&#xff08;实际使用的则是micron…

openlayers-16-添加一组轨迹动画

实现一组动画&#xff0c;即根据一组只有起止点坐标的线段&#xff0c;实现点在这些线段上较为平滑的移动&#xff0c;移动速度和平滑程度均可控制。 下面的代码仅作为思路参考&#xff0c;还欠缺很多细节&#xff0c;比如在进行插值计算时&#xff0c;还需要判断经纬度坐标差&…

提高Python并发性能 - asyncio/aiohttp介绍

在进行大规模数据采集时&#xff0c;如何提高Python爬虫的并发性能是一个关键问题。本文将向您介绍使用asyncio和aiohttp库实现异步网络请求的方法&#xff0c;并通过具体结果和结论展示它们对于优化爬虫效率所带来的效果。 1. 什么是异步编程&#xff1f; 异步编程是一种非阻…

ChatGPT帮助高职院校学生实现个性化自适应学习与对话式学习

一、学习层面&#xff1a;ChatGPT帮助高职院校学生实现个性化自适应学习与对话式学习 1.帮助高职院校学生实现个性化自适应学习 数字技术的飞速发展引起了教育界和学术界对高职院校学生个性化自适应学习的更多关注和支持&#xff0c;其运作机制依赖于人工智能等技术&#xff0…

Open3D 点云均值滤波

目录 一、算法原理1、均值滤波2、参考文献二、代码实现三、结果展示本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、算法原理 1、均值滤波 对待处理的当前采样点,选择一个模板,该模板由其邻近的若干个数据点组成,…

传送带下料口堵塞识别检测算法 yolov5

传送带下料口堵塞识别检测算法通过python基于yolov5网络深度学习框架模型&#xff0c;下料口堵塞识别检测算法能够准确判断下料口是否出现堵塞现象&#xff0c;一旦发现下料口堵塞&#xff0c;算法会立即抓拍发出告警信号。Python是一种由Guido van Rossum开发的通用编程语言&a…

SOC总线学习记录之ICB(Internal Chip Bus)

蜂鸟E203总线&#xff1a; 采用自定义总线协议 ICB&#xff08;Internal Chip Bus&#xff09;&#xff0c;该总线用于蜂鸟 E203 内核内部使用&#xff0c;同时也可作为 SoC 中的总线使用。 ICB 总线的初衷是为了能够尽可能地结合 AXI 总线和 AHB 总线的优点&#xff0c;兼具高…

css学习7(盒子模型)

1、盒子模型图&#xff1a; Margin(外边距) - 清除边框外的区域&#xff0c;外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域&#xff0c;内边距是透明的。Content(内容) - 盒子的内容&#xff0c;显示文本和图像。 <!DO…

内存四区(个人学习笔记黑马学习)

1、内存分区模型 C程序在执行时&#xff0c;将内存大方向划分为4个区域&#xff1a; 代码区:存放函数体的二进制代码&#xff0c;由操作系统进行管理的全局区:存放全局变量和静态变量以及常量栈区:编译器自动分配释放,存放函数的参数值,局部变量等 堆区:由程序员分配和释放,若程…

服务器上使用screen的学习记录

服务器上使用screen 训练模型的时候&#xff0c;花费时间是很长的&#xff0c;不可能一直挂在桌面上。所以就想到用screen了。 记录一下简单的操作指令。 创建screen screen -S roof # 新建一个名字为name的窗口&#xff0c;并进入到该窗口中进入后打开环境&#xff0c;运…