谷歌地图上的100k或更多标记没有聚类

Question

我有一些数据是通过安装在汽车中的GPS设备收集的.所以我的数据基本上是在街道/道路上/周围.每个坐标都有一定的价值.数据的格式是这样的.

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

我的任务是在谷歌地图上绘制这些lat-long.当我们谈论放置10个,100个或1000个标记时,这似乎是一件非常容易的事.但正如我上面提到的,我们正在通过驱动器收集数据,并且两个长度或两个点之间的距离将是几个脚(例如2-3英尺).

所以在调查结束时,对于一个城市的一小部分,我将拥有90-100k纬度,而整个城市可能会达到100万.

我已经尝试添加9-10k标记和它的woking罚款,但当我尝试加载40k,50k,60k时,它使我的浏览器非常慢,这是我结束的错误消息.

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

我一直在谷歌搜索它,但我无法找到任何示例或教程,这将导致我通过使用我熟悉的技术放置100万标记.(这是asp.net).找到这个例子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.

我相信我的代码中会有数百万个错误.如果需要,我愿意改变我的方法. 这是该应用程序的演示.

Answer 1

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

Fusion 表本身将在服务器端将标记渲染为图块并检索这些标记。

Google Maps API 允许您使用 FusionTablesLayer 对象将 Google Fusion Tables 中包含的数据呈现为地图上的图层。

此链接中有关它的示例。

与 fusiontables 一起，我会做类似基于视口的渲染之类的事情，这基本上意味着只绘制视口可见的标记 - 不是真正的“聚类技术”，但当我们考虑渲染速度时非常有用。阅读有关它们的更多信息谷歌文档（fusiontables）和视口标记管理。同一页面还包含更详细的Fusiontables api和教程链接。

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

还需要注意的是：

仅表中的前 100,000 行数据会映射或包含在查询结果中。

要了解更多信息，请从这里查看。

干杯。