google-maps-api-3 - 使用 MarkerClusterer 的谷歌地图中的两种类型的标记

标签 google-maps-api-3 google-maps-markers markerclusterer

我有两种地理定位信息:一种是确切位置,另一种是近似的区域级地理定位。当我在 map 上显示这些信息时,我希望能够为每种位置使用不同的标记类型,确切位置为绿色,近似位置为蓝色。 我正在使用 MarkerClusterer 将标记分组到一个气泡中,但是,我需要两个 MarkerClusterer,一个用于近似位置,另一个用于精确位置。这样一来,我的 MarkerCluster 就对应了每种地理位置。

我的问题是:有时,这两个集群会重叠,这可能会导致混淆:

Image with low zoom

如您所见,它表明我在那里有 7 个标记(这是蓝色的,但它实际上是一个绿色的标记,因为这些地理位置完全相同)。

Zoomed in image

但是,放大来看,我有 9 个,因为第二个集群在第一个集群的下方(请注意,目前 booth 集群的颜色相同,应该是绿色 (7) 和蓝色 (2) - 所以用户可以确定 (2) 个位置是近似的)

关于如何制作集群的集群有什么想法吗?或者另一种让用户知道有两种信息的方法?

最佳答案

如果您只有两个(或几个)标记类,那么一种方法是创建第二个 MarkerClusterer 实例。因此,让我们有两组选项,其中样式(未显示)不同:

var mcOptions1 = {gridSize: 40, styles: clusterStyles1, maxZoom: 19};       
var mcOptions2 = {gridSize: 40, styles: clusterStyles2, maxZoom: 19 };

然后您可以构建两个单独的标记数组,比如 markers1 和 markers2,在我的例子中,这取决于标记的 status 属性:
(请注意,每个标记也正常添加到 map 中,未显示)

// push to the array, markers[]
    switch(status)
    {
    case 'Include':
        markers1.push(marker);
      break;
    case 'Exclude':
        markers2.push(marker);
      break;
    default:
        markers1.push(marker);
    };

最后,然后创建两个 MarkerClusterer 实例,每个实例都有单独的数组和选项

var markerClust1 = new MarkerClusterer(map, markers1, mcOptions1);
var markerClust2 = new MarkerClusterer(map, markers2, mcOptions2);

map 上的结果显示了两种风格的标记图标和两种风格的集群。当您缩小时,两个单独的标记永远不会聚集在一起 - 我认为这正是您所需要的,而且它在 map 上看起来不错! (我想发布一些 map 图片,但在我的声誉增加之前不能发布图片!!)

我确实使用了后来的 MasterClusterPlus而不是较早的 MasterClusterer,但我看不出有任何理由表明该方法不适用于较早的版本。

关于google-maps-api-3 - 使用 MarkerClusterer 的谷歌地图中的两种类型的标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16701926/

相关文章:

javascript - 使用 Javascript,我如何随机偏移经度和纬度数字

javascript - 如何更改标记标签文本颜色?

javascript - 谷歌地图 : How to add HTML elements to specific coordinates?

ios - 如何在 Swift 4 中更改谷歌地图的簇颜色

javascript - 谷歌地图标记集群

google-maps-api-3 - 在 Google Maps API v3 中启用新的 GL 渲染?

google-maps-api-3 - 我可以将 Google map 方向嵌入到我自己的网站中吗?

javascript - MarkerClusterer 中使用的标记的标签

javascript - 谷歌地图API : apply MarkerClusterer only to a category of specific markers

javascript - 在 javascript 中跨越谷歌地图的平铺纹理