使用SVG路径作为Google Map 中的标记图标会在有许多标记时导致极度滞后

我正在使用Google Maps API在 Map 上呈现标记 .

随着标记数量的增加，我在与 Map 的交互中经历了恶化的延迟（我们正在谈论几百到几千个标记） .

当用于渲染标记的图标是SVG路径时，会发生此延迟 - 自定义SVG路径或 Map 库中可用的内置路径之一，如 google.maps.SymbolPath.CIRCLE -

const icon = {
  // path: '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'
  path: google.maps.SymbolPath.CIRCLE
};

如果我使用 url 而不是 path ，性能很好而且没有滞后 . 静态SVG也可以无延迟地工作

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

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>

我在Chrome（60）和Firefox（58）上看到了这种滞后现象，但在Edge上却没有 .

理想情况下，我希望能够使用SVG路径来渲染图标，因为它允许以数据相关的方式对视觉效果进行细粒度控制，而不是使用预渲染的静态资源 .

有没有人有解决滞后/性能问题的经验？

谢谢 .

这是两个片段 . 尝试平移和缩放以注意两者之间的差异 . （如果在运行代码段时出现错误，请尝试多次单击“运行”按钮 . 可能需要一些时间才能加载库）

第一个演示使用SVG路径作为图标（内置SymbolPath.CIRCLE） -

function initMap(){
  const mapConfig = {
    center: new google.maps.LatLng(40.7274929, -73.8519416),
    zoom: 12,
  };

  const map = new google.maps.Map(document.getElementById('map'), mapConfig)
  let icon;
  icon = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 3,
    fillOpacity: 1,
    fillColor: 'yellow',
    strokeColor: 'gray',
    strokeWeight: 1
  };
    
  jQuery.get('https://data.cityofnewyork.us/resource/he7q-3hwy.json', data => {
    data.forEach(row => {
      const point = row.the_geom.coordinates;
      const position = new google.maps.LatLng(point[1], point[0]);
      new google.maps.Marker({ position, icon, map, draggable: false });
    });
  });

}

#container {
      height: 400px;
      margin: 0;
      padding: 0;
    }
    
    #map {
      height: 100%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEKtLNmzXRdMPn-SKFfu97qMQrfgbqOcU&callback=initMap">
</script>

<div id="container">
  <div id="map"></div>
</div>

第二个片段使用静态PNG--

function initMap(){
  const mapConfig = {
    center: new google.maps.LatLng(40.7274929, -73.8519416),
    zoom: 12,
  };

  const map = new google.maps.Map(document.getElementById('map'), mapConfig)
  let icon;
  icon = { url: 'https://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png' };
    
  jQuery.get('https://data.cityofnewyork.us/resource/he7q-3hwy.json', data => {
    data.forEach(row => {
      const point = row.the_geom.coordinates;
      const position = new google.maps.LatLng(point[1], point[0]);
      new google.maps.Marker({ position, icon, map, draggable: false });
    });
  });

}

#container {
      height: 400px;
      margin: 0;
      padding: 0;
    }
    
    #map {
      height: 100%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEKtLNmzXRdMPn-SKFfu97qMQrfgbqOcU&callback=initMap">
</script>

<div id="container">
  <div id="map"></div>
</div>