谷歌地图自定义标记样式后变慢

Question

我将使用google-maps为我的angular2项目提供支持，以下是我的地图上的标记对象 -

private defaultMarkerStyle = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 6,
        fillOpacity: 0.8,
        fillColor: '#5A7793',
        strokeColor: '#FFFFFF',
        strokeWeight: 2,
    };
let markerOnMap = new google.maps.Marker({
            position: new google.maps.LatLng(lat, long),
            title: marker.name,
            icon: this.defaultMarkerStyle, // <- Removing this line works fine!!??
            map: this.googlemap,
            visible: true,
        });

当地图加载超过1000个标记时，缩放操作会变得缓慢并出现一些延迟。

但是当我使用地图时删除了图标属性后，它就能正常运行（请参见上面示例中的注释）。

请给出建议。

- Shalaka Deshpande

---

你找到解决方案了吗？如果是的话，请分享 (: - undefined

@Anss 我决定实现聚类算法，以便在加载大量数据时使地图性能更好。 - undefined

在我的Angular 4应用程序中，一个第三方表格导致固定的内容渲染缓慢，使用简单的表格解决了问题，感谢你的回应。 - undefined

Answer 1

问题在于Google的基于路径的标记存在严重的性能问题。已经为此问题提交了一个错误报告，但他们尚未解决。一个解决方法是使用带有基于图像的图标的标准标记。显然，如果您需要动态生成图标，则此解决方案需要额外的工作。要生成动态图标，您需要生成一个图像并将其转换为图像数据URI。例如，以下代码可用于生成一个没有性能问题的圆形图标。此解决方案适用于支持SVG图像作为数据URI的浏览器。

function CircleIcon(options) {
   let {
      scale,
      fillOpacity = 1.0, 
      fillColor = '#000000', 
      strokeColor = '#000000',
      strokeWeight = 1,
   } = options;

   let diameter = 2 * scale;

   let svg = btoa(`
      <svg xmlns="http://www.w3.org/2000/svg" width="${diameter}px" height="${diameter}px">
         <circle cx="${scale}" cy="${scale}" fill="${fillColor}" fill-opacity="${fillOpacity}" stroke="${strokeColor}" stroke-width="${strokeWeight}px"/>
      </svg>
   `);

   let icon = new google.maps.MarkerImage(
      'data:image/svg+xml;base64,' + svg,
      new google.maps.Size(diameter, diameter, 'px', 'px'),
      new google.maps.Point(0, 0),
      new google.maps.Point(scale, scale)
   )

   return icon;
} 

然后，您将按照以下方式使用图标：

this.defaultMarkerStyle = CircleIcon({
   scale: 6,
   fillOpacity: 0.8,
   fillColor: '#5A7793',
   strokeColor: '#FFFFFF',
   strokeWeight: 2,
});

let markerOnMap = new google.maps.Marker({
   position: new google.maps.LatLng(lat, long),
   title: marker.name,
   icon: this.defaultMarkerStyle,
   map: this.googlemap,
   visible: true,
});

- deAtog