javascript - 当传递 icon 参数(有效或无效)时，标记加载时间减慢 10 倍

Question

我发现当谷歌地图中的标记上设置图标时，加载时间要慢得多。它具有大量标记的显着影响。

我的测试环境有 20000 个标记。

以这种方式创建这么多标记:

   new google.maps.Marker({
      position: { lat: this.lat, lng: this.lng },
      map: this.map,
      draggable: false,
      optimized: true,
      visible: true
    });

大约需要 400 毫秒。使用默认图标。

但是使用添加的图标参数创建标记(无论它是什么类型的图标):

   new google.maps.Marker({
      position: { lat: this.lat, lng: this.lng },
      map: this.map,
      icon: {url: this.iconUrl},
      draggable: false,
      optimized: true,
      visible: true
    });

大约需要 4500 毫秒

我尝试了不同类型的图标 - svg 硬编码、文件中的 svg、base 64、jpg、png、gif、不同尺寸的图标 - 从 50x50px 到 1x1px。一切都会给出相同的结果。即使传递带有空 url 的图标对象也会产生 4500 毫秒加载时间的相同结果。事实上，我们尝试使用图标，无论成功与否，都会极大地减慢加载时间。

在这种情况下有什么办法可以缩短加载时间吗？

比较 url 字段作为对象和字符串的 fiddle 示例:https://jsfiddle.net/ur76jckb/

Answer 1

我建议设置 icon: this.iconUrl 而不是 icon: {url: this.iconUrl}，这似乎可以加快速度。