google-maps-api-3 - 谷歌地图上的 100k 或更多标记没有聚类

Question

我有一些数据是通过安装在汽车中的 GPS 设备收集的。因此，我拥有的数据基本上位于街道/道路上/周围。每个坐标都有一些值(value)。数据的格式是这样的。

lat         | long        | value
---------------------------------
12.979155   | 77.644925   | 6 
---------------------------------
12.97916833 | 77.64493667 | 2
---------------------------------
12.97917167 | 77.64492167 | 8 

我的任务是在谷歌地图上绘制这些经纬度。当我们谈论放置 10、100 或 1000 个标记时，这似乎很容易。但正如我上面提到的，我们正在通过驱动器收集数据，两个经纬度或两个点之间的距离将在几英尺(比如 2-3 英尺)内。

因此，在调查结束时，我将在一个城市的一小部分获得 90-100k lat-long，而整个城市可能会达到 100 万。

我尝试添加 9-10k 标记并且它工作正常，但是当我尝试加载 40k、50k、60k 时，它使我的浏览器非常慢，这是我要结束的错误消息。

Uncaught RangeError: Maximum call stack size exceeded      main.js:1

我一直在谷歌上搜索它，但我找不到任何示例或教程，这些示例或教程将引导我使用我知道的技术(即 asp.net)放置 100 万个标记。
找到这个例子 http://www.scribblemaps.com/markerComplex/作者:Jonathan Wagner，但我无法理解它并在我现有的代码中实现它，就像这样。

//从 MSSQL 服务器获取 lat-long。

function PushValues(ParameterID) {
         a = ParameterID.slice(5);
    var CityID = $('#ddlCity').val().split('|');
    $.ajax({
        type: "POST",
        url: "index.aspx/PushLatLong",
        data: "{CityID:'" + CityID[0] + "',OperatorID:'" + $('#ddlOperator').val() + "',ParameterID:'" + ParameterID.slice(4) + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        cache: false,
        success: function (response) {
            GooglePlaces = response.d.split('#');
            if (GooglePlaces != "Blank") {
                HasValues = 1;
            } else {
                HasValues = 0;
            }

        },
        Error: function (r) {

        }
    });
}

//在谷歌地图中放置值。

function PlaceValues() {
    var options = { zoom: 3, center: new google.maps.LatLng(37.09, -95.71), mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById('map'), options);
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < GooglePlaces.length; i = i + 2) {
        ltlg = new google.maps.LatLng(GooglePlaces[i], GooglePlaces[i + 1]);
        var marker = new google.maps.Marker({
            position: ltlg,
            map: map,
            title: 'Place number',
            icon: "img/GoogleIcons/" + legendfirstvalue[1]
        });
        bounds.extend(ltlg);
    }
    map.fitBounds(bounds)
    $('#DivLoadImage').hide();
}

我想在这里提到的另一件事是标记的颜色取决于 lat-long 的值。所以我会有多个颜色标记。我本来可以很容易地尝试对标记进行聚类，但是，在我放大到该区域之前，我将无法看到标记颜色。所以我无法使用clustring。

我确信我的代码中会有数百万个错误。如果需要，我愿意改变我的方法。
Here是应用程序的演示。

Answer 1

您可以获得的最接近(没有集群)是使用融合表来存储数据并从那里检索数据 - 这可能与您的示例已经使用的类似 - 并且由于它的闪存它可以比普通 api 更快地呈现它们。

融合表本身将在服务器端将标记渲染到图 block 并检索这些标记。

The Google Maps API allows you to render data contained in Google Fusion Tables as a layer on a map using the FusionTablesLayer object.

关于它的例子 in this link.

与 fusiontables 一起，我会做一些类似基于视口(viewport)的渲染的事情，这基本上意味着只绘制对视口(viewport)可见的标记 - 不是真正的“聚类技术”，但在我们考虑渲染速度时非常有用。阅读更多关于他们的信息 google docs (fusiontables)和 viewport marker management.同一页面还包含指向 Fusiontables api 的更详细链接和教程。

如果您最终决定在服务器端进行集群——请做好准备，这不是一件容易的事——但如果你这样做了，请实现类似于基于网格的集群的东西。 (也在同一页面上进行了解释-该死的好链接？)

另外需要注意的是:

Only the first 100,000 rows of data in a table are mapped or included in query results.

要了解更多信息， see from here.

干杯。