[英]Javascript: Objects pushed into array overriding each other?
I have an object that is formatted like this: 我有一个这样格式化的对象:
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]
]
};
This shows different animals' (T##) locations on different dates. 这显示了在不同日期的不同动物(T ##)的位置。 I want to place a marker on Google Maps showing the location of the animal at a specific date, as well as a polyline showing the path it followed to get there.
我想在Google地图上放置一个标记,以显示该动物在特定日期的位置,以及一条折线,以显示该动物到达那里的路径。 I'm having trouble with the polyline part.
我在折线部分遇到了麻烦。 Please see below.
请看下面。 Everything seems to work up until
path[tegu_name[j]].push(tegu_location);
一切似乎都可以进行,直到
path[tegu_name[j]].push(tegu_location);
, where path[tegu_name[j]]
looks like it gets overriden by only the last location, instead of the location being added to the array. ,其中
path[tegu_name[j]]
看起来仅被最后一个位置覆盖,而不是被添加到数组中的位置。 For some animals (T23, T34, T35, T36), the arrays remain completely empty, despite there being correctly dated locations. 对于某些动物(T23,T34,T35,T36),尽管位置正确,但阵列仍然完全空着。 Any ideas?
有任何想法吗? I have a feeling I made some silly mistake, but I can't figure it out.
我感觉自己犯了一些愚蠢的错误,但是我无法弄清楚。
Live: http://crocdoc.ifas.ufl.edu/projects/tegumap/ (Change the date to May 18th to run this part of the code through many locations and you can see the console printing objects with only one location [from line 776]. The current locations are the purple dots) 现场直播: http : //crocdoc.ifas.ufl.edu/projects/tegumap/ (将日期更改为5月18日,以在许多位置运行此部分代码,并且您可以看到控制台打印对象只有一个位置[从行开始776]。当前位置是紫色的点)
Full JS: http://crocdoc.ifas.ufl.edu/projects/tegumap/js/tegumap.js 完整的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);
}
看起来您的path[tegu_name[j]] = ...
行(755)应该在k
循环之外 ,否则,数组将在k
每次迭代中重新创建。
No, with the .push()
method nothing gets overwritten. 不,使用
.push()
方法不会覆盖任何内容。 It's the path[tegu_name[j]] = new Array();
这是
path[tegu_name[j]] = new Array();
that overwrites the array each time. 每次都会覆盖数组。
Yet, there are some other correction/simplifications to be made. 但是,还需要进行其他一些更正/简化。
marker_container
is an Array. marker_container
是一个数组。 Don't use a for-in-loop here (beginning of the changeDate function) telemetry_data
is an Object with properties. telemetry_data
是具有属性的对象。 You should use a for-in-loop in here, instead of creating an array of property names ( tegu_name
) and iterating over that. 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.