我有一个格式如下的对象:
var telemetry_data = {
T36: [
//Date, lat, long
[20120516, 25.40294163, -80.46972051],
[20120518, 25.40306787, -80.46967025],
[20120521, 25.40234592, -80.46980265]
],
T43: [
[20120523, -25.4076545, -80.46945134],
[20120525, -25.40761155, -80.46756243]
]
};
这显示了不同日期的不同动物(T ##)位置。我想在Google地图上放置一个标记,显示动物在特定日期的位置,以及显示它到达那里的路径的折线。我在使用折线部件时遇到了麻烦。请看下面。在path[tegu_name[j]].push(tegu_location);
之前,所有内容似乎都有效,其中path[tegu_name[j]]
看起来只被最后一个位置覆盖,而不是被添加到数组中的位置。对于一些动物(T23,T34,T35,T36),阵列保持完全空,尽管有正确的日期位置。有任何想法吗?我有一种感觉,我犯了一些愚蠢的错误,但我无法弄清楚。
直播:http://crocdoc.ifas.ufl.edu/projects/tegumap/(将日期更改为5月18日,以便通过多个位置运行此部分代码,您可以看到控制台打印对象只有一个位置[来自第776行]。当前位置是紫点)
完整的JS:http://crocdoc.ifas.ufl.edu/projects/tegumap/js/tegumap.js
//Telemetered tegus
var tegu_location;
var path = new Object();
var line = new Object();
//For each tegu
for (var j = 0; j < tegu_name.length; j++) {
var tegu_key = telemetry_data[tegu_name[j]];
//For each date
for (var k = 0; k < tegu_key.length; k++) {
path[tegu_name[j]] = new Array();
if (tegu_key[k][0] <= date) {
console.log("use point at date "+tegu_key[k][0]);
tegu_location = new google.maps.LatLng(tegu_key[k][1], tegu_key[k][2]);
path[tegu_name[j]].push(tegu_location);
} else {
marker = new google.maps.Marker({
icon: point_tracked,
shape: point_shape,
map: map,
position: tegu_location
});
marker_container.push(marker);
}
console.log(path[tegu_name[j]]);
}
line[tegu_name[j]] = new google.maps.Polyline({
path: path[tegu_name[j]],
strokeColor: '#32cd32',
strokeOpacity: 0.6,
strokeWeight: 3
});
line[tegu_name[j]].setMap(map);
}
答案 0 :(得分:4)
看起来path[tegu_name[j]] = ...
行(755)应 k
循环,否则每次迭代k
都会重新创建数组。
答案 1 :(得分:1)
不,使用.push()
方法不会被覆盖。每次都会覆盖数组path[tegu_name[j]] = new Array();
。
然而,还有一些其他的修正/简化要做。
marker_container
是一个数组。不要在此使用for-in-loop(changeDate函数的开头)telemetry_data
是一个具有属性的对象。你应该在这里使用for-in-loop,而不是创建一个属性名称数组(tegu_name
)并迭代它。
var tegu_location;
var path = new Object();
var line = new Object();
//For each tegu
for (var tegu in telemetry_data) {
path[tegu] = new Array();
//For each date
for (var k = 0; k < telemetry_data[tegu].length; k++) {
var keys = telemetry_data[tegu][k];
if (keys[0] <= date) {
console.log("use "+ tegu +" point ("+keys[1]+", "+keys[2]+") at date "+keys[0]);
path[tegu].push(tegu_location = new google.maps.LatLng(keys[1], keys[2]));
} else {
if (tegu_location) {
marker = new google.maps.Marker({
icon: point_tracked,
shape: point_shape,
map: map,
position: tegu_location
});
marker_container.push(marker);
}
}
}
console.log(path[tegu]);
line[tegu] = new google.maps.Polyline({
path: path[tegu],
strokeColor: '#32cd32',
strokeOpacity: 0.6,
strokeWeight: 3
});
line[tegu].setMap(map);
}