高德地图的marker和markercluster的应用场景分析

author author     2023-05-08     697

关键词:

参考技术A 表格中每一行数据均对应地图上一个坐标点,要求:
1、在表格中选中一行时,在地图上对应坐标点被同步点亮,以区别其他坐标点
2、点击地图上坐标点时,在表格中对应数据行被同步选中,以区别表格中其他数据行。
3、地图上多个坐标点重合时,被点亮坐标点自动显示在最顶层;点击此重合坐标点,等同于点击该重合坐标点中最顶层的那一个坐标点。

1、下图为点标记方式下的需求示意图:

说明:点亮就是上图中选中对应行数据的点标记颜色变为红色。

2、下图为点聚合方式下的需求示意图:

说明:上图中有表格有8行数据,对应地图上8个坐标点,其中有3个坐标点是重合的。

解决以上需求,可选择的方案有两个:

所谓点标记Marker,就是在地图上指定的一个坐标上打上一个Marker(如显示一个水滴图形,或者自定义的其他任何图形式),一个地图上可以定义很多个Marker。

这种方式的优点:可以清晰区分每个点,数据行和点标记之间可以联动。

这种方式的缺点:如果几个坐标相互之间非常近,导致点标记Marker重叠,很难识别重叠了几个坐标点,分别是哪几个点。

所谓点聚合MarkerCluster就是,在地图缩小的一定比例时,预定距离内的点会自动合并成一个点显示【上图中有3数字的点就是一个聚合点,说明有3个坐标合并的,并通过地图提供的方法可以获取到这个3个坐标的清单】。点聚合本质上是若干个点的集合,可以随时往其中增、减点,但无法针对其中的特定一个点进行个性化(如点亮)。

【注意,JSAPI1.0版本下点聚合不好用,2.0版本就能正常使用了】

这种方式的优点:地图上可以清晰看出哪些是单独点?哪些是聚合点?每个聚合点聚合了多少个坐标?

这种方式的缺点:在地图上无法点亮任意指定的一个坐标点(这个坐标点可能是一个单独的坐标点,也可能是一个聚合点中的某一个坐标点)

    通过分析以上可选择的方案,发现两个方案都不能完全满足需求:Marker方式难以取到重合点的点清单;MarkerColuster方式难以点亮指定一个坐标点。【此事古难全,对于完美主义者来说,这种扬弃性质的选择最是痛苦】

    最终笔者选择了Marker的方案,思路如下:

  1、点亮标记,表格选中行的同时,对应坐标点的图标变为红色

   2、标记置顶,点亮的标记通过setzIndex置顶(对于单独点没有意义,但对于重合点,就有价值了)

   3、关闭点亮,将上一个选中的点置暗,即恢复正常,不再处于点亮状态。

    对于重合点,在地图上的无法选中指定一个点,也无法显示点清单,更无法显示重合点内包含的点数量。但是可以通过表格选中某一行的方式,点亮地图上的对应坐标点,并将该坐标点置顶,以便于在地图上可以选中该点(选中的目的是方便后续逻辑,如通过弹出信息窗方式显示该点的详细信息)。

  如果有通过MarkerCluster能够解决以上需求的方法,欢迎各位可以在留言区探讨。

在高德地图上添加自定义marker

参考技术A主要是利用addMarker方法添加一个Marker,但Marker的样式为自定义的View:布局: 查看详情

高德地图marker的label被别的marker遮挡

...移出的时候,蒋该节点z-index改为02、利用maker的setTop方法高德文档marker详细参数说明 查看详情

android高德地图sdk,在地图上我点击了某个marker,然后这个被点击的marker就被自动定位

被自动定位就会到手机地图的中央了,怎么设置让其不到地图中央呢参考技术A在Marker的点击事件中这样写booleanonMarkerClick(Markermarker)marker.showInfoWindow();returntrue;//返回:true表示点击marker后marker不会移动到地图中心;返回false表示点击m... 查看详情

高德地图自定义图标的点标记marker--初体验(代码片段)

...记方法大差不差通过上两篇文章我们已经了解到如何引入高德地图并进行初始化了,本文主要讲解普通点标记Marker,Marker类型推荐在数据量为500以内时使用。若数据量大于500,推荐使用LabelMarker海量点,创建一个默认图... 查看详情

高德地图使用-marker标记点(代码片段)

效果如图1.标记点列表varmarkersList=[ position:[118.922723,31.915307], icon: image:'../images/start.png', size:[30,30], , name:"监控一", position:[118.903333,31.91563], icon: image:'../i 查看详情

vue高德地图中修改标记点的图标形状样式(代码片段)

...4;</div>",);效果:点标记-覆盖物-教程-地图JSAPI|高德地图API方法一:通过修改marker中自定义显示内容中附带的图片标签来改变point标记点的形状和样式marker=newAMap.Marker(position:positionItem,zIndex:101,map:amapContainer,content:&... 查看详情

vue高德地图中修改标记点的图标形状样式(代码片段)

...4;</div>",);效果:点标记-覆盖物-教程-地图JSAPI|高德地图API方法一:通过修改marker中自定义显示内容中附带的图片标签来改变point标记点的形状和样式marker=newAMap.Marker(position:positionItem,zIndex:101,map:amapContainer,content:&... 查看详情

谷歌markercluster

我们有时候需要观察地图不同地方数据的所在范围和分布密集情况,热力图和聚合点的使用无疑是最好的选择。1.首先说说百度地图,只做国内的地图可以使用百度地图的海量点和热力图还是蛮好用的。a.海量点的最大好处是加... 查看详情

h5唤起地图导航

...腾讯地图下载页,为用户提供下载,实现体验闭环;2、高德地图:调用方式: http://uri.amap.com/marker?position=lng,lat&name=address&coordinate=gaode&callnative=1其中lat、lng、address分别为经纬度和详细地址三个参数,其中经纬度为... 查看详情

h5调用地图功能

....amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a><ahref="http://api.map.baidu.com/marker?location=纬度,经度&title=所在位置名称&content=所在位置的简介(可选)&output=html">百度地图</a>注意:高德地图... 查看详情

地图缩放后marker偏移的问题

最近在做地图开发,遇到一个小坑,记录在这里。按照高德地图的文档,初始化Marker(图标)并将其放置到地图上,示例如下: varmarker=newAMap.Marker({icon:"http://www.easyicon.net/api/resizeApi.php?id=1185658&size=32",position:[120.1,30.1]});本以... 查看详情

如何实现在h5里调起高德地图app?(上)

这一篇文章,将讲述如何在H5里调起高德地图APP,并展示兴趣点。适合于展示某个餐馆,商场等,让用户自行选择前往方式。场景一、在高德地图上展示Marker点或者POI标记在一些基于位置分享的应用开发中,我们会在地图上标记m... 查看详情

关于使用高德地图的一些常用操作(代码片段)

1.引入高德地图如何去掉地图上的logo.amap-logodisplay:none;2.地图上添加图标newAMap.Marker(icon:require(‘../../../assets/img/platform.png‘),offset:newAMap.Pixel(-12,-16),position:[120.236522,30.183376],map:map)3.设定自己想要的地 查看详情

引入高德地图配置

varmap=newAMap.Map(‘container‘,{resizeEnable:true,zoom:14,center:[120.73915601,30.2306131]});map.plugin(["AMap.ToolBar"],function(){map.addControl(newAMap.ToolBar());});varmarker=newAMap.Marker({posit 查看详情

腾讯地图marker中大小的控制和事件绑定。

腾讯地图SDK地址:  点击进入   在示例中Mylocation中需要加入按钮并绑定事件。varcontainer=document.getElementById("container");varcenter=newTMap.LatLng(39.984104,116.307503);//设置中心点坐标//初始化地图varmap=newTMap.M 查看详情

百度地图在地图上添加图片,marker可以显示不同的图片么?

...arker=getResources().getDrawable(R.drawable.iconmarka);//得到需要标在地图上的资源marker.setBounds(0,0,marker.getIntrinsicWidth(),marker.getIntrinsicHeight());//为maker定义位置和边界overitem=newOverItemT(marker,this,3);mMapView.getOverlays().add(overitem);//添加ItemizedOverlay... 查看详情

使用高德地图api实现拖动地图后重新回到原处(代码片段)

...:问题描述    我在一个有限大小的div容器内使用高德地图api定位了一个位置,并且添加了marker点,当我拖动地图查看其他位置时,有时候拖的太远,导致最开始定位那个地方不好找(找不到)。 二... 查看详情

flutter插件开发之android高德地图(代码片段)

从零开发一个Android高德地图插件前言看过很多博客文章,发现很少提到关于实战中如何使用Android与Dart的混编交互,Flutter在实际项目中仍然需要大量运用到原生的一些功能,比如相机,地图,访问设备本地相... 查看详情