5

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

使用 Firefox 或 Chrome 查看示例页面时，一切都加载得很快并且运行良好。

不幸的是...... Internet Explorer 的性能非常糟糕。加载时间不好，当我尝试在地图上拖动或缩放时也是如此。

这是一个简单的 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
      });
    }
  }

当您将它与一些额外的属性和事件一起使用时，它会变得最糟糕！但是，如果您只是删除标记的“图标”属性，就会出现基本的 Google 标记，并且一切都像 Chrome 和 Firefox 一样快......

有没有人知道为什么在使用 Symbol 时在 IE 上会这么慢，我怎样才能加快这个过程。

谢谢！

4

1 回答 1

1

Google 地图上的符号图标是新VectorIcons的一部分。这些不是位图，而是以 SVG 格式描述为矢量路径。这些基本上是带有很多点的路径，直到形状完成。

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

我认为没有一种方法可以加快速度。您可以减少显示标记的数量（例如使用聚类），直到达到可接受的渲染速度。或者您可以简单地使用位图图标。

于 2012-09-19T07:01:00.450 回答