正文 

当前位置： 首页 > 知识 >

标记聚类 - 融合表层 - Google Maps v3

     2023-02-23     68

关键词：

【中文标题】标记聚类 - 融合表层 - Google Maps v3【英文标题】：Marker Clustering - Fusion Table Layer - Google Maps v3 【发布时间】：2011-10-13 16:34:02 【问题描述】：

有没有办法让标记聚类（即makerclusterer）与融合表层一起工作？似乎您必须为 markerclusterer 分配标记，但在使用融合表层时，Google 正在处理标记/信息窗口？仍在尝试解决这个融合表的问题。

基本上是在寻找一种方法来对通过融合表提供的大量标记进行聚类

【问题讨论】：

【参考方案1】：

Fusion Table Layers 为覆盖在地图图块顶部的每个图块渲染一个额外的 png 图像，其中包含该图块的数据点，这是服务器端渲染部分。因此，每个图块包含多个数据点。

从数据中生成您自己的标记，这是 MarkerClusterer 所必需的，它不会在每个图块上叠加图像，它会在地图上为每个数据点创建一个单独的标记，并在其上叠加一个精灵图像。

基于此，无法使用 MarkerClusterer 和 FusionTablesLayer。

【讨论】：

跑过这篇文章，为自己研究这个。我想我会发表评论，是的，根据 Google Fusion Tables Team 的说法是可能的。 [groups.google.com/d/msg/fusion-tables-users-group/eW-der8-diM/… @danagerous 在 FusionTablesLayer 上执行此操作与使用 Fusion Table 中的数据（如您提到的参考文章）之间存在很大差异。可以使用来自 Fusion Table 的数据来实现，但仍然无法使用在服务器端呈现的 FusionTablesLayer 来实现。他们必须在服务器端的每个缩放级别创建分组项目的图层。 @tentaclenorm 我刚刚测试了 URL。有效。它应该将您带到 Google Fusion Table API 用户组。未能在 Google 群组论坛中搜索具有相同地理位置的多个项目不显示。 @danagerous 我刚刚注意到，当我单击它时，在 URL 的末尾附加了一个括号。一旦我移除该支架，它就可以工作。干杯，谢谢。 我无法编辑。显然只有5分钟的窗口。这里又是网址。 groups.google.com/d/msg/fusion-tables-users-group/eW-der8-diM/…【参考方案2】：

这是我自己的代码。我在早期链接中尝试了该技术，但它对我不起作用。所以我就是这样做的。

首先我用常规的chart api查询来查询融合表

function initialize() 
    mapMain = new google.maps.Map(document.getElementById('map-canvas'), 
        center: new google.maps.LatLng(37.4, -100.1),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    );
    mc = new MarkerClusterer(mapMain);
    var queryText = encodeURIComponent("select wikipedia_article, xy from "+tableid);
    var query = new google.visualization.Query("https://www.google.com/fusiontables/gvizdata?tq="+queryText);
    query.send(handleQueryResponse);

接下来，在我的 handleQueryResponse 中，我动态创建了标记并将其添加到 Mapclusterer

function handleQueryResponse(response)
     dataTable = response.getDataTable();

    for(var i=0; i< dataTable.getNumberOfRows();i++)           
        var hrefval = dataTable.getValue(i,0).toString();

        var arr = dataTable.getValue(i,1).toString().split(" ");            
        var latlng = new google.maps.LatLng(arr[0], arr[1]);

        var marker = new google.maps.Marker(
            position: latlng,
            map:mapMain
        );
        fn = markerClick(i, marker);
        google.maps.event.addListener(marker,'click', fn);          
        markers.push(marker);
    
    mc.addMarkers(markers);

在这种情况下，主地图，标记数组（下面代码中的 mc）是全局变量。您可以查看完整的工作示例here。

【讨论】：

你能总结一下他们在那个网站上做了什么，这样你的答案就不会受到链接腐烂的影响吗？ 这很有趣，我想对 FusionTableLayer 中加载的 KML 标记做同样的事情。你有什么例子吗？ 我很久以前做过这个，从那时起就没有做过任何基于谷歌地图的工作。 您编写了任何服务器端代码来为标记生成数据？ 不，我只是用这种特殊情况下的数据填充了一个融合表。【参考方案3】：

我认为您无法将其与融合表一起使用。 IMO 融合表缺乏对空间索引的支持。 A si 有助于将 2d 复杂度降低到 1d 复杂度。它用于许多应用程序，如热图、树图、邮政编码搜索、地图应用程序。您想查找 Nick 的希尔伯特曲线空间索引四叉树博客。

【讨论】：

【参考方案4】：

Fusion Tables 允许您使用服务器端渲染（来自谷歌服务器）一次查看数千个点。 Marker Clusterer 通过从最近的点（来自客户端浏览器）构建一组集群来解决这个问题。我不一定会同时使用它们，但它可能适用于您的用例，这取决于您。

您可以在此处阅读有关它们如何工作的更多信息：

http://code.google.com/apis/maps/articles/toomanymarkers.html

如果您也确实需要，可以使用 Fusion Tables API 将数据从 Fusion Tables 提供给 Marker Clusterer。

希望这会有所帮助。

【讨论】：

Android Google Maps V2 Cluster 隐藏 infoWindow

...eMapsAndroidAPI实用程序库来使用集群解决方案。在每个单个标记或聚类标记上，一个信息窗口会在触摸所选标记时打开。然后在infoWindow上触摸我使用这 查看详情

如何使用 react-google-maps 显示多个标记

】如何使用react-google-maps显示多个标记【英文标题】：HowdoIdisplaymultiplemarkerswithreact-google-maps【发布时间】：2017-10-0704:08:31【问题描述】：我正在尝试使用名为react-google-maps的npm包显示多个标记，但我遇到了困难。我在此处关注如... 查看详情

在 Google Maps API v3 中删除标记

】在GoogleMapsAPIv3中删除标记【英文标题】：RemovingaMarkerinGoogleMapsAPIv3【发布时间】：2011-12-1904:16:10【问题描述】：我正在尝试删除一个像这样初始化的标记：marker=newgoogle.maps.Marker(position:latLng,map:map,draggable:true,animation:google.maps.Anim... 查看详情

优化以使用 react-google-maps 进行标记

】优化以使用react-google-maps进行标记【英文标题】：optimizetomarkwithreact-google-maps【发布时间】：2018-08-0517:33:32【问题描述】：我目前正在使用react-google-maps开发GoogleMap页面。我的代码如下classGoogleMapBoxextendsReact.Componentstate=center:this.... 查看详情

如何在 react-google-maps 中添加标记？

】如何在react-google-maps中添加标记？【英文标题】：Howtoaddmarkersinreact-google-maps?【发布时间】：2017-11-1702:04:45【问题描述】：在Meteor1.5中使用ReactJS问题：需要一种方法来添加Marker使用react-google-maps使用ES6和JSX格式遵循文档并能够... 查看详情

从 google_maps_flutter 中删除多余的标记和圆圈

】从google_maps_flutter中删除多余的标记和圆圈【英文标题】：Removeredundantmarkersandcirclesfromgoogle_maps_flutter【发布时间】：2020-02-1408:07:34【问题描述】：我正在使用google_maps_flutter仅在地图上显示特定标记。不幸的是，地图上还有大量... 查看详情

如何使用 react-google-maps 通过单击在地图上添加标记？

】如何使用react-google-maps通过单击在地图上添加标记？【英文标题】：HowtoaddmarkeronmapbyClickusingreact-google-maps?【发布时间】：2018-08-2219:25:29【问题描述】：我正在努力寻找一个非常简单的示例，说明当用户使用基于组件的React-google... 查看详情

标记未显示在 Google Maps API 中

】标记未显示在GoogleMapsAPI中【英文标题】：MarkersnotshowinginGoogleMapsAPI【发布时间】：2014-10-1009:21:44【问题描述】：我刚刚将以下代码加载到我的网页中，经过数小时的故障排除后，我无法显示标记？我已确认解析php文件正在工作... 查看详情

在 Google Maps App 中使用标记打开 Google Map

】在GoogleMapsApp中使用标记打开GoogleMap【英文标题】：OpenGoogleMapwithmarkerswithinGoogleMapsApp【发布时间】：2018-05-3011:16:58【问题描述】：我使用GoogleMapsJavaScriptAPI在网页内的地图上放置了一堆标记。我希望允许用户选择在Google地图应... 查看详情

在 google_maps_flutter 中获取可见标记

】在google_maps_flutter中获取可见标记【英文标题】：GetVisibleMarkersingoogle_maps_flutter【发布时间】：2019-06-0401:51:42【问题描述】：使用GoogleMapsforFlutter，我在地图上的不同位置放置了一些标记。我的Flutter应用程序上有一个单独的Raised... 查看详情

Google Maps API：通过单击标记打开 url

】GoogleMapsAPI：通过单击标记打开url【英文标题】：GoogleMapsAPI:openurlbyclickingonmarker【发布时间】：2012-02-0421:33:54【问题描述】：我想通过点击使用GoogleMapsAPI3的标记打开一个新窗口。不幸的是，GoogleMapsAPI的示例并不多，我发现了... 查看详情

使 Google Maps Android 标记处理多行

】使GoogleMapsAndroid标记处理多行【英文标题】：MakeGoogleMapsAndroidmarkerhandlemultiplelines【发布时间】：2019-11-1304:53:27【问题描述】：如何使GoogleMapsAndroid标记标题处理多行？现在只显示一行seethismarkertitleforreference【问题讨论】：您的... 查看详情

我可以从一个外部库导入和编辑代码吗？ （例如 google-maps-utils）

...18-05-1813:43:51【问题描述】：我正在使用google-maps-utils（仅标记聚类）并且代码是只读的。dependenciescompile\'com.google.maps 查看详情

如何在 vue2-google-maps 中填充标记

】如何在vue2-google-maps中填充标记【英文标题】：Howtopopulatemarkersinvue2-google-maps【发布时间】：2018-08-0614:37:34【问题描述】：我对整个js很陌生，对代码了解不多。这是包：https://github.com/xkjyeah/vue-google-maps这必须在明天提交。但这... 查看详情

使用 Google Maps API 添加标记功能

】使用GoogleMapsAPI添加标记功能【英文标题】：AddMarkerfunctionwithGoogleMapsAPI【发布时间】：2011-12-0319:18:21【问题描述】：我有以下Javascript，其中包括标准GoogleMapsAPIinitialize()函数和自定义addMarker()函数。地图将正常加载，但标记不会... 查看详情

如何获取 google-maps-v3 上的所有标记

】如何获取google-maps-v3上的所有标记【英文标题】：howtogetallmarkersongoogle-maps-v3【发布时间】：2011-02-0408:47:15【问题描述】：有没有办法获得谷歌地图上的所有标记？【问题讨论】：您能否详细说明您要做什么。另外，如果您有任... 查看详情

谷歌标记聚类。如何将此库添加到项目中？迅速

】谷歌标记聚类。如何将此库添加到项目中？迅速【英文标题】：GoogleMarkerClustering.Howtoaddthislibtoproject?Swift【发布时间】：2020-02-2720:42:30【问题描述】：关于安装GoogleMarkerClustering库有多个说明，例如：https://developers.google.com/maps/d... 查看详情

Flutter - 如何删除单个 google_maps_flutter ^0.5.21 标记？

】Flutter-如何删除单个google_maps_flutter^0.5.21标记？【英文标题】：Flutter-Howtoremoveanindividualgoogle_maps_flutter^0.5.21marker?【发布时间】：2020-01-1506:00:41【问题描述】：自google_maps_flutter成立以来发生了相当大的变化，这意味着删除单个标... 查看详情