Question

我正在使用google maps api v3，我需要同时移动许多（数百个）标记。从服务器，我得到一些对象，代表一个标记，当它随着时间（几个月）移动时，它的坐标随着它移动的时间排序。在我的地图上方，我有一个进度条，用“月：年”文字表示时间。我的代码所做的是在准确的时间移动标记（并绘制折线），使其适合“时间进度条”上当前显示的时间。在标记停止的每个位置，我留下一个新标记来显示运动的历史。整个过程一遍又一遍地重复（setInterval（）函数）。我的代码正在运行，问题是性能，所以我在问：有什么办法可以改善性能吗？比我做的更好的方式？必有一些东西。这是我的代码：

if (mapOverTime != null) {
    trackables.forEach(function (trackable) {
        var marker = new google.maps.Marker({
            map: mapOverTime,
            draggable: false,
            clickable: false,
            icon: geoIcon,
            animation: google.maps.Animation.none,                                
            zIndex: 2
        });            

        var polyline = new google.maps.Polyline(polyOptions);
        polyline.setMap(mapOverTime);
        // adding these to arrays so i can access and remove them from the map later
        markersArray.push(marker);
        polylineArray.push(polyline);
        trackable.years.forEach(function(year) {
            $.each(year.months, function(index, month) {
                setTimeout(function() {
                    if (month.coordinates.length > 0) {
                        var moveCounter = month.coordinates.length;
                        var timeToMove = Math.floor(pause_interval / moveCounter);
                        $.each(month.coordinates, function(i, position) {
                            var latTo = position.latitude;
                            var lngTo = position.longitude;
                            var destination = new google.maps.LatLng(latTo, lngTo);
                            setTimeout(function() {
                                moveToPosition(marker, destination, polyline);
                            }, (i) * timeToMove);
                        });
                    }
                }, pause_interval * index);
            });
        });
    });
}

这是使行动发生的功能：

function moveToPosition(marker, destination, polyline) {
  // current path of the polyline
  var path = polyline.getPath();
  // add new coordinate
  path.push(destination);
  // rendering whole line would make the map even more chaotic, this makes the line dissapear after 8 moves of the marker
  if (path.getLength() > 8) // comment out to render whole 
      th.removeAt(0); // path of polyline
  // set marker position to the new one
  marker.setPosition(destination);
  // render new marker on this position so that it is well visible where the coins were
  var historyPoint = new google.maps.Marker({
    map: mapOverTime,
    draggable: false,
    icon: historyIcon,
    animation: google.maps.Animation.none,
    zIndex: 0
  });
  historyPoint.setPosition(destination);
  // again add to global array so i can set access and remove this marker from the map later
  historyPoints.push(historyPoint);        
}

我唯一要做的就是遍历所有标记及其坐标，在给定时间移动标记，在其后面绘制线条，在新位置创建新标记，然后转到另一个坐标。当1次迭代结束时，将从地图中删除所有对象，然后再次启动该过程。知道如何提高性能吗？或唯一的解决方案是减少我想渲染的标记数量？谢谢你的意见！

Answer 1

建议：

为什么还要指定animation: google.maps.Animation.none,？如果您不使用它，只需将其删除即可。根据{{3}}，有两个值BOUNCE和DROP，因此无论如何都没有none值。
如果可以的话，使用标准的javascript数组循环，而不是jquery的$.each(); docs
您只需为了指定目标坐标而创建两个变量。你曾经使用它们一次，而且从不再使用它们，为什么不使用原始值呢？即。
```
var latTo = position.latitude;
var lngTo = position.longitude;
var destination = new google.maps.LatLng(latTo, lngTo);
```

变成

    var destination = new google.maps.LatLng(position.latitude, position.longitude);

您可以在此处进行另一项改进。使用简写内联结构表示法来指定目标坐标。它应该减少创建数百个LatLng对象的一些开销。即
```
var destination = new google.maps.LatLng(position.latitude, position.longitude);
```

然后变成：

    var destination = {lat: position.latitude, lng: position.longitude};

您创建折线，然后设置地图：

var polyline = new google.maps.Polyline(polyOptions);
polyline.setMap(mapOverTime);

我一直看到这一点而且从不理解它...只需将map: mapOverTime添加到polyOptions，就可以节省必须进行额外的函数调用。

与historyPoint类似...不要在其上调用setPosition()，只需在创建标记时通过的选项中指定position: destination

所有这些都是微不足道的事情，试图同时移动数百个标记可能会有所不同，但我仍然建议你尝试它们。

数百个标记同时移动。表现不佳

1 个答案: