Question

我使用Google Maps API在地图上渲染标记。

随着标记数量的增加，我在与地图交互时遇到了延迟的恶化（我们正在谈论几百到几千个标记）。

当用于渲染标记的图标是SVG路径时，会发生此延迟 - 自定义SVG路径或地图库中可用的内置路径之一，例如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） -

＆＃13;

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 });
    });
  });

}

＆＃13;

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

＆＃13;

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

＆＃13;

第二个代码段使用静态PNG -

＆＃13;

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 });
    });
  });

}

＆＃13;

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

＆＃13;

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

＆＃13;

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

0 个答案: