5

Google Maps V3 API の新しい Symbols オブジェクトをテストしています。同じシンボル パスと色を使用して、400 個のマーカーのすべての「アイコン」属性を設定しました。

Firefox または Chrome でサンプル ページを見ると、すべてが高速に読み込まれ、うまく機能します。

残念ながら... Internet Explorer のパフォーマンスは非常に悪いです。読み込み時間と、地図をドラッグまたはズームしようとするときが悪い。

これは、IE でテストするために使用できる簡単な JavaScript の例です。

  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 に答える