Javascript 在GoogleMaps中使用SVG路径作为标记图标会在存在多个标记时导致极端滞后

我正在使用GoogleMapsAPI在地图上渲染标记

随着标记数量的增加（我们说的是几百到几千个标记），我在与地图交互时遇到了更严重的延迟

当用于呈现标记的图标是SVG路径时，会出现此延迟，该路径可以是自定义SVG路径，也可以是地图库中可用的内置路径之一，如

google.Maps.SymbolPath.CIRCLE

--

如果我使用

url

而不是

路径

，那么性能非常好，没有延迟。静态SVG也可以无延迟地工作

const icon = {
  url: 'some-image.png'
  // url: 'some-image.svg'
};

some image.svg

包含与创建滞后相同的路径--

#容器{
高度：400px；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}

看起来您的图标太大了。如果我缩小它（比例：0.1），性能就会恢复（我看不出“内置”的问题：google.maps.SymbolPath.CIRCLE）。你为什么要用这么大的图标？查看我在这台电脑上所有浏览器的行为，Chrome 63.0.3239.132、Firefox 57.0.4、IE 11.0.9600.18893。@geocodezip感谢您的回复。我认为图标的大小并不重要。我缩小了规模，看到了同样的问题。无论如何，我都可以使用google.maps.SymbolPath.CIRCLE。我只是想排除内置路径是否存在某种问题。我提供了两个片段，希望它们能够说明使用静态图像和SVG路径之间的区别。我认为SVG路径图标不能缓存，这可能解释了延迟的原因。您好，除了构建静态SVG文件之外，您是否找到了替代方法？不幸的是，没有。最终使用静态文件来解决缓存问题。我相信这取决于浏览器如何处理它。在这种情况下，Edge优于Chrome/Firefox。

const icon = {
  url: 'some-image.png'
  // url: 'some-image.svg'
};

<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
  <path 
    d="M 10, 10 m -7.5, 0 a 7.5,7.5 0 1,0 15,0 a 7.5,7.5 0 1,0 -15,0"
    fill="red" 
    stroke="blue" 
    stroke-width="3" />
</svg>