0

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

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

您会看到页面本身并没有滞后，对服务器的 ajax 调用非常快，但瓶颈实际上是谷歌地图，当我循环并在地图上添加标记时，它只会冻结几秒钟。

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

基本上我所做的是在标记的 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);

这有什么问题吗？处理大量标记的更好方法？

谢谢！

4

2 回答 2

1

实际上，您不需要设置延迟（例如 200 毫秒），您可以使用 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);
  }
}

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

于 2013-09-05T15:43:19.687 回答
1

不要一次添加所有标记，将它们添加为较小的块（例如一次 10 个），在块之间设置一个 setTimeout 以使浏览器有时间将更改呈现到地图。

于 2013-05-01T15:05:51.597 回答