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图形时，这很好用：Google每个图块创建一个单独的画布，而不是每个图标一个img，这显然是缩放更好。

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

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

Answer 1

您生成的SVG图标有多复杂？因为您还可以自己在画布对象上绘制图标，并使用toDataURL方法生成数据uri以便在Google地图中使用。这实际上会生成一个位图图像，因此可能在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图像放在方块的旁边。如果您想将标记的背景更改为一些常见的方式，我在下面分享了一些常见的标记路径：

    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';

希望它对你有所帮助。

Answer 3

这里有svg patch for ie，你应该像

一样使用

<!--[if IE 9]>
   <script src="svg.js"></script>
<![endif]-->

在Google地图中优化SVG标记

3 个答案: