我正在测试Google Maps V3 API的新Symbols对象。我已经用相同的符号路径和颜色设置了400个标记的每个“图标”属性。

当使用Firefox或Chrome浏览示例页面时,所有内容都可以快速加载并且运行良好。

不幸的是... Internet Explorer中的性能确实很差。加载时以及尝试在 map 上拖动或缩放时都不好。

这是一个简单的javascript示例,可用于在IE上进行测试

  var map;
  function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

  }

  function addMarkers() {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    for (var i = 0; i < 400; i++) {
      var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
                                          southWest.lng() + lngSpan * Math.random());
      var marker = new google.maps.Marker({
        position: latLng,
        icon:{
            path: google.maps.SymbolPath.CIRCLE,
            fillOpacity: 1,
            strokeWeight: 0,
            scale: 4
         },
       map: map
      });
    }
  }

当您将它与一些额外的属性和事件一起使用时,情况会更糟!但是,如果您只是删除标记的“icon”属性,则会显示基本的Google标记,并且一切运行起来都和Chrome和Firefox一样快...

有人能回答为什么使用Symbol时IE上的显示速度这么慢吗?我该如何加快处理速度。

谢谢!

最佳答案

Google Maps上的符号图标是新VectorIcons的一部分。这些不是位图,但是被描述为SVG格式的矢量路径。这些基本上是具有很多点的路径,直到完成形状为止。

现在,您有很多图标,这意味着必须绘制许多SVG路径。当您在不同的浏览器中看到不同的渲染速度时,基本上就是在比较浏览器的SVG渲染引擎-从您的应用程序看来,IE9比其他浏览器慢。

我不认为有什么方法可以加快速度。您可以减少显示标记的数量(例如,使用聚类),直到达到可接受的渲染速度。或者,您可以只使用位图图标。

10-06 05:09
查看更多