谷歌地图上没有集群的100k或更多标记 [英] 100k or more markers on google maps without clustering
问题描述
我有一些数据是通过安装在汽车上的GPS设备收集的。所以我拥有的数据基本上都躺在街/路上/周围。每个坐标都有一定的价值。数据的格式是这样的。
lat |长|价值
---------------------------------
12.979155 | 77.644925 | 6
---------------------------------
12.97916833 | 77.64493667 | 2
---------------------------------
12.97917167 | 77.64492167 | 8
我的任务是在谷歌地图上绘制这些经纬图。当我们谈论放置10个，100个或1000个标记时，这似乎是相当容易的任务。但正如我上面提到的，我们正在通过驱动器收集数据，并且两个经纬度或两个点之间的距离将会很少（例如2-3英尺）。
因此，在调查结束时，我将在一个城市的一小部分地区拥有90-100万美元的长期贷款，并且可能为整个城市增加100万美元。
我已经尝试添加9-10k标记并且它的调用正常，但是当我尝试加载40k，50k，60k时，它使我的浏览器非常缓慢，这是我结束的错误消息。
未捕获的RangeError：超出main.js的最大调用堆栈大小：1
我一直在使用Google进行搜索，但是我找不到任何示例或教程，这些示例或教程将使我通过使用我知道的一些技术来放置100万个标记。 （这是asp.net）。
找到这个例子 http://www.scribblemaps.com/markerComplex/ 作者：Jonathan Wagner ，但我不能理解它，并在我现有的代码中执行它，就像这样。
//从MSSQL服务器获取lat-long。 p>
函数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;
}
}，
错误：函数（r）{
}
}）;
}
//在Google地图中放置值。
函数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。
我确信在我的代码中会有数百万个错误。如果需要，我愿意改变我的方法。
这里是应用程序的演示。
最近你可以得到（没有集群）是使用融合表来存储数据并从那里检索 - 这可能与你的例子类似的东西已经在使用了 - 因为它的闪光灯可以使它们比正常的api能够实现的速度快得多。
Fusion表格本身会将服务器端的标记渲染到tile并检索这些标记。
使用Google Maps API，您可以使用FusionTablesLayer对象将包含在Google
Fusion Tables中的数据作为图层呈现在地图上。
示例 在此链接中。\\ b 与融合表一起，我会做类似基于视口的渲染，这基本上意味着只绘制对视口可见的标记 - 而不是真正的聚类技术但是当我们考虑渲染的速度时非常有用。详细了解它们 Google文档（融合表）和视口标记管理。同一页面还包含更详细的 Fusiontables api 和教程。 如果您最终决定在服务器端集群 - 做好准备，这不是一件容易的事情 - 但如果你这样做，实施类似于基于网格的聚类。 （也解释了同一页 - 该死的好链接？） 另外需要注意的是： 表中只有前100,000行数据被映射或包含在查询结果中。 阅读更多，请看这里。 干杯。 I have some data which is collect though a GPS device installed in a car. So the data I have is basically lying on/around the street/road. Every coordinates have some value. The format of the data is something like this. My task here is to plot these lat-long on google map. It seems to be quite easy task when we talk about placing 10, 100 or 1000 markers. But as I have mentioned above we are collecting the data by drive and the distance between a two lat-long or two points will be in few feets(say 2-3 feet). So at the end of the survey, I'll be having 90-100k lat-long for a small part of a city and might go up to one million for whole city. I have tried adding 9-10k marker and its woking fine but when I am trying to load 40k, 50k, 60k it is making my browser very slow and this is the error message I am ending with. I have been googling a lot about it, but I m not able to find any example or tutorial which will lead me to place 1 million marker by using technologies I know a bit.(which is asp.net).
Found this example http://www.scribblemaps.com/markerComplex/ By Jonathan Wagner, but I m not able to understand it and implement it in my existing code which goes like this. //To fetch lat-long from the MSSQL server. // Places values in google map. One more thing i would like to mention here is that the color of marker depend on the value of lat-long. So i'll be having multiple color markers. I have could have easily try clustring the marker but, then I wont be able to see the marker color until i zoon in to the area. So there is no way i can use clustring. I am sure there will be million errors in my code. I m willing to change my approach if needed.
Here is the demo of the application. Closest you can get (without clustering) is to use fusion tables to store data and retrieve it from there - which is probably something similar your example is using already - and since its flash it can render them much faster than normal api can accomplish. Fusion tables itself will render markers at server side to tiles and retrieves those. The Google Maps API allows you to render data contained in Google
Fusion Tables as a layer on a map using the FusionTablesLayer object. Example about it in this link. Together with fusiontables I would do something like viewport based rendering which basically means drawing only markers visible to viewport - not really "clustering technique" but very useful when we are considering speed of rendering. Read more about them google docs (fusiontables) and viewport marker management. Same page also contais more detailed link to Fusiontables api and tutorials. If you eventually decide to cluster at server side - be prepared that its not an easy task - but if you do, implement something similar to grid based clustering. (Also explained withing the same page - damn good links?) Also to be noted that: Only the first 100,000 rows of data in a table are mapped or included in query results. To read more, see from here. Cheers. 这篇关于谷歌地图上没有集群的100k或更多标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ b
lat | long | value
---------------------------------
12.979155 | 77.644925 | 6
---------------------------------
12.97916833 | 77.64493667 | 2
---------------------------------
12.97917167 | 77.64492167 | 8
Uncaught RangeError: Maximum call stack size exceeded main.js:1
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();
}
