【问题标题】:Convert markerCluster into a pie chart in google maps将 markerCluster 转换为谷歌地图中的饼图
【发布时间】:2017-01-05 20:46:28
【问题描述】:

我目前正在制作集群的谷歌地图。我已经设法对标记进行聚类。我的地图中有两种类型的标记。现在,当我对这些进行聚类时,我无法将基础标记分组显示。 我想将它们转换成饼图。每个标记在饼图中都有其权重。就像下图一样。 Chart Marker Clusterer

我也读过 MarkerClustererPlus。但是在地图中没有使用这个的例子。 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/ 此链接无效。如果有任何关于此请分享的其他文档。

我的地图中有两种不同类型的标记。当这两种类型的标记聚集在一起时,该簇应该变成一个饼图,其中包含这两种类型的权重与基础标记数成正比。

如果有什么相关的请回答。谢谢。

【问题讨论】:

  • 一个相关的先前问题Pie charts clustering on Google Maps 的答案是他通过扩展谷歌地图标记集群库以使用饼图而不是集群标记来解决这个问题。他还为更好的sample提供了一个github。希望对您有所帮助!
  • @Mr.Rebot 我已经查看了示例。我不太确定在此使用的标准。我从这个例子和bl.ocks.org/gisminister/10001728 中了解到,它调用一个函数来根据从markrer 集群中提取的数据制作饼图,然后粘贴该饼图的静态副本来代替集群。我说的对吗?

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


【解决方案1】:

你想要的都在这里https://github.com/hassanlatif/chart-marker-clusterer

Traffic_accidents.json - 是 simple_example.html 的数据

var accident_injuries = data.features[i].properties["5074"]; // Some like category ...

然后为您的饼图设置数据(组和标题):

switch (Number(accident_injuries)) {
  case 1:
    accident_title = "Fatal";
    break;
  case 3:
    accident_title = "Serious injuries";
    break;
  case 2:
    accident_title = "Very serious injuries";
  ........

设置你的标记

var accident_LatLng = new google.maps.LatLng(Number(accident_lnglat[1]), Number(accident_lnglat[0]));
var marker = new google.maps.Marker({
  position: accident_LatLng,
  title: accident_title
});

然后压入数组

markers.push(marker);

for循环后生成簇

var markerCluster = new MarkerClusterer(map, markers, opt);

仅此而已。呸呸呸

【讨论】:

    猜你喜欢
    • 2020-11-24
    • 1970-01-01
    • 1970-01-01
    • 2012-02-18
    • 1970-01-01
    • 1970-01-01
    • 2013-06-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多