谷歌地图在自定义标记样式时变得很慢

Question

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

但是当我使用 map 删除 icon 属性时，它一切正常(请参阅上面示例中的注释(

请指教。

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