Javascript 如何在地图上添加数百个标记而不延迟？

我正在使用谷歌地图来显示用户在喝什么，在哪里喝，这样他们就可以查看谁在他们附近喝什么

您可以在此处看到地图的当前版本： www.vinpin.com/map

您将看到页面本身没有延迟，对服务器的ajax调用速度非常快，但真正的瓶颈是GoogleMaps，当我循环并在地图上添加标记时，它会冻结几秒钟

有没有办法在不冻结地图的情况下添加标记

基本上，我所做的是循环一个json标记列表并添加它们，如下所示：

// Map Creation Part:
var mapOptions = {
    center: new google.maps.LatLng(47.279229, -94.21875), // North America
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 4,
    minZoom: 3
};

map = new google.maps.Map(document.getElementById("google_map_canvas"), mapOptions);

// Part that's in the loop:
var shadow = {
    url: (isPin) ? pin_marker_icon_shadow : user_marker_icon_shadow,
    size: new google.maps.Size(29.0, 25.0),
    anchor: new google.maps.Point(8.0, 12.0)
};

var image = {
    url: (isPin) ? pin_marker_icon : user_marker_icon,
    size: new google.maps.Size(16.0, 25.0),
    anchor: new google.maps.Point(8.0, 12.0)
};

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
    icon: image,
    shadow: shadow
});

markers.push(marker);

这有什么问题吗？有没有更好的方法来处理很多标记

---

谢谢

不要一次添加所有标记，将它们添加到较小的块中（比如一次添加10个），在块之间设置一个setTimeout，让浏览器有时间渲染对地图的更改。

实际上，您不需要设置延迟（例如200ms），只需使用0延迟即可。这样做的原因是Javascript是在一个线程中执行的，浏览器将执行整个AJAX请求回调（包括循环），直到控制权返回到浏览器，浏览器才能够处理其他事情，如地图移动等

抛出常规setTimeout（）调用会中断当前的执行（循环）并将其安排到以后。这使浏览器有机会在两者之间安排其他事情（如地图移动）。这将稍微减慢标记的插入速度，以获得更好的用户体验（减少延迟）

如果有标记列表，则插入过程可能如下所示：

function addMarkers(jsonList) {
  if (jsonList.length > 0) {
    var element = jsonList.pop();
    var marker = new google.maps.Marker({...});
    markers.push(marker);
    setTimeout(function() {
      addMarkers(jsonList);
    }, 0);
  }
}

---

可能不是最优雅的解决方案，但我希望这一解释将推动您和其他人朝着正确的方向前进。

每个标记的阴影和图像是否相同？或者每一个都可能不同？如果没有，则将其与循环一起向外移动。另一种方法是使用一个标记聚类器。或者@geocodezip的建议你说得很对，有3种不同的标记/阴影，所以我只需要在循环之外创建它们，并在需要时使用它们。谢谢好的，我会循环，然后等待200毫秒，跟上循环？你有什么好的例子说明我应该怎么做吗？谢谢