在Google地图中优化SVG标记

Question

在为图标使用SVG符号时,是否有很好的方法可以优化Google Maps API v3如何在HTML文档中绘制标记？以下是使用SVG符号的标记示例:

  var star = {
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
    fillColor: 'yellow'
  };

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: star,
    map: map,
    optimized: true //Does not seem to do anything..
  });

谷歌有一个名为"优化"的属性,可以在标记上设置,当使用例如PNG图标而不是SVG图形时,这可以正常工作:谷歌每个图块创建一个单独的画布而不是每个图标一个图像,这显然更好地缩放.

然而,使用SVG标记时,"优化"属性似乎没有做任何事情:它们似乎总是在每个标记的一个画布中绘制.当我有许多标记时,某些浏览器会出现性能问题.Chrome通常可以很好地处理它,但IE9例如在显示重大性能问题之前不会处理许多标记.在这种情况下,群集不是一种选择.

有谁知道优化这个的好方法,以便浏览器可以同时处理更多的SVG标记？

Answer 1

您生成的 SVG 图标有多复杂？因为您还可以自己在画布对象上绘制图标，并使用toDataURL方法生成用于 Google 地图的 data-uri。这实际上会生成一个位图图像，以便可以在 IE9 中工作（至少支持该方法）。

您还可以在画布上绘制 SVG，但如果您想以编程方式更改它们，则需要注意一些注意事项。而且 IE9 可能不会合作，所以我不确定这是否是正确的方法。