Javascript:被推入数组的对象相互覆盖

Javascript: Objects pushed into array overriding each other?

本文关键字：对象 覆盖 数组 Javascript      更新时间：2023-09-26

>我有一个格式如下的对象：

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##） 位置。我想在谷歌地图上放置一个标记，显示动物在特定日期的位置，以及一条折线，显示它到达那里的路径。我在折线部分遇到问题。请看下文。一切似乎都工作到path[tegu_name[j]].push(tegu_location);，path[tegu_name[j]]看起来它只被最后一个位置覆盖，而不是被添加到数组中的位置。对于某些动物（T23，T34，T35，T36），尽管有正确日期的位置，但数组仍然完全为空。有什么想法吗？我有一种感觉，我犯了一些愚蠢的错误，但我无法弄清楚。

Live： 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);
}
相关文章：