[英]Javascript: Objects pushed into array overriding each other?
我有一個這樣格式化的對象:
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);
}
看起來您的path[tegu_name[j]] = ...
行(755)應該在k
循環之外 ,否則,數組將在k
每次迭代中重新創建。
不,使用.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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.