我有一些通过安装在汽车上的 GPS 设备收集的数据。所以我拥有的数据基本上都位于街道/道路上/周围。每个坐标都有一些值。数据的格式是这样的。
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 经纬度,对于整个城市,可能会达到 100 万。
我尝试添加 9-10k 标记,它的工作正常,但是当我尝试加载 40k、50k、60k 时,它使我的浏览器非常慢,这是我结束时的错误消息。
Uncaught RangeError: Maximum call stack size exceeded main.js:1
我已经在谷歌上搜索了很多相关内容,但我找不到任何示例或教程可以引导我使用我了解的技术(即 asp.net)放置 100 万个标记。
找到了这个例子http://www.scribblemaps.com/markerComplex/ http://www.scribblemaps.com/markerComplex/作者:Jonathan Wagner,但我无法理解它并在我现有的代码中实现它,如下所示。
//从 MSSQL 服务器获取经纬度。
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();
}
我想在这里提到的另一件事是标记的颜色取决于经纬度的值。所以我会有多种颜色标记。我可以轻松地尝试将标记聚集在一起,但是,然后我将无法看到标记颜色,直到我放大到该区域。所以我无法使用cluster。
我确信我的代码中会有数百万个错误。如果需要的话,我愿意改变我的方法。Here http://coeindia.in/test/harry/index.html是应用程序的演示。