iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >uni-app开发小程序中遇到的map地图的点聚合以及polygon划分区域问题
  • 236
分享到

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

uni-app小程序vue.js前端javascript 2023-09-13 19:09:01 236人浏览 八月长安
摘要

写一篇文章来记录以下我在开发小程序地图过程中遇到的两个小坑吧,一个是点聚合,用的是joinCluster这个指令,另一个是polyGon在地图上划分多边形的问题: 首先说一下点聚合问题,由于之前没有做过小程序地图问题,所以浏览了很多资料,最

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

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

 

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

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

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

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

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

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

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

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

来源地址:https://blog.csdn.net/qq_45059691/article/details/132564209

--结束END--

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

本文链接: https://www.lsjlt.com/news/406335.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作