传递图标参数（有效与否）时，标记加载时间会慢 10 倍

Question

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

我的测试环境有 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 毫秒加载时间的相同结果。我们尝试使用图标这一事实，无论成功与否，都会极大地减慢加载时间。

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

Fiddle 将 url 字段作为对象和字符串进行比较的示例：https://jsfiddle.net/ur76jckb/

Answer 1

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

传递图标参数（有效与否）时，标记加载时间会慢 10 倍

Marker load time is 10x slower when icon parameter is passed (valid or not)

javascript

google-maps

google-maps-api-3

google-maps-markers