自定义标记样式时谷歌地图变慢答案

【问题标题】：Google maps becomes slow when customized marker styles自定义标记样式时谷歌地图变慢
【发布时间】：2018-01-04 10:31:28
【问题描述】：

在我的 angular2 项目中使用 google-maps，我的地图有以下标记对象 -

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 个标记时，放大/缩小操作会变慢并有一些延迟。

但是当我用地图删除图标属性时，一切正常（参见上面示例中的注释）

请提出建议。

【问题讨论】：

您找到解决方案了吗？如果是，请分享（：
@Anss 我决定实施聚类以使地图在加载大量数据时表现良好。
在我的 Angular 4 应用程序中，是第三方表格导致图钉渲染缓慢，将其替换为简单表格即可解决问题，感谢您的回复。

标签： angular google-maps google-maps-markers marker

【解决方案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,
});

【讨论】：