优化 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..
  });

Google 有一个名为“优化”的属性，可以在标记上设置，例如，当使用 PNG 图标而不是 SVG 绘图时，效果很好：Google 为每个图块创建一个画布，而不是每个图标一个 img，这显然是扩展性更好。

然而，在使用 SVG 标记时，“优化”属性似乎没有任何作用：它们似乎总是在每个标记的一个画布中绘制。当我有很多标记时，某些浏览器开始出现性能问题。 Chrome 通常可以很好地处理它，但例如 IE9 在显示出显着的性能问题之前不会处理很多标记。在这种情况下，集群不是一个选项。

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

Answer 1

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

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

Answer 2

根据我的经验，您可以使用此脚本，并且效果很好：

var marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 10
      },
      draggable: true,
      map: map
    });

此外，如果您想使用 css 中的 SVG 文件。可以这样使用：

var marker = new google.maps.Marker({
      position: map.getCenter(),
      icon: {
        path: 'M22-48h-44v43h16l6 5 6-5h16z',
        fillColor: '#6331AE',
        fillOpacity: 1,
        strokeColor: '',
        strokeWeight: 0
      },
    map_icon_label: '<span class="class_name1 class_name2"></span>', 
  draggable: true,
  map: map
});

然后您可以在 class_name1 和 class_name2 中添加 CSS 值，以将 svg 图像放在正方形的一侧。 如果你想把marker的背景改成一些常用的方式，下面我分享了一些常用的marker路径：

    MAP PIN = 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z';
    SQUARE PIN = 'M22-48h-44v43h16l6 5 6-5h16z';
    SHIELD = 'M18.8-31.8c.3-3.4 1.3-6.6 3.2-9.5l-7-6.7c-2.2 1.8-4.8 2.8-7.6 3-2.6.2-5.1-.2-7.5-1.4-2.4 1.1-4.9 1.6-7.5 1.4-2.7-.2-5.1-1.1-7.3-2.7l-7.1 6.7c1.7 2.9 2.7 6 2.9 9.2.1 1.5-.3 3.5-1.3 6.1-.5 1.5-.9 2.7-1.2 3.8-.2 1-.4 1.9-.5 2.5 0 2.8.8 5.3 2.5 7.5 1.3 1.6 3.5 3.4 6.5 5.4 3.3 1.6 5.8 2.6 7.6 3.1.5.2 1 .4 1.5.7l1.5.6c1.2.7 2 1.4 2.4 2.1.5-.8 1.3-1.5 2.4-2.1.7-.3 1.3-.5 1.9-.8.5-.2.9-.4 1.1-.5.4-.1.9-.3 1.5-.6.6-.2 1.3-.5 2.2-.8 1.7-.6 3-1.1 3.8-1.6 2.9-2 5.1-3.8 6.4-5.3 1.7-2.2 2.6-4.8 2.5-7.6-.1-1.3-.7-3.3-1.7-6.1-.9-2.8-1.3-4.9-1.2-6.4z';
    ROUTE = 'M24-28.3c-.2-13.3-7.9-18.5-8.3-18.7l-1.2-.8-1.2.8c-2 1.4-4.1 2-6.1 2-3.4 0-5.8-1.9-5.9-1.9l-1.3-1.1-1.3 1.1c-.1.1-2.5 1.9-5.9 1.9-2.1 0-4.1-.7-6.1-2l-1.2-.8-1.2.8c-.8.6-8 5.9-8.2 18.7-.2 1.1 2.9 22.2 23.9 28.3 22.9-6.7 24.1-26.9 24-28.3z';
    SQUARE = 'M-24-48h48v48h-48z';
   SQUARE_ROUNDED = 'M24-8c0 4.4-3.6 8-8 8h-32c-4.4 0-8-3.6-8-8v-32c0-4.4 3.6-8 8-8h32c4.4 0 8 3.6 8 8v32z';

希望对你有帮助。