Google Maps Api V3 - 更改 MarkerImage 的 URL 时明显闪烁答案

【问题标题】：Google Maps Api V3 - noticeable flicker when changing MarkerImage's URLGoogle Maps Api V3 - 更改 MarkerImage 的 URL 时明显闪烁
【发布时间】：2016-06-08 20:35:56
【问题描述】：

我想更改鼠标悬停事件中的标记图像。现在，重要的一点是这样的：

google.maps.event.addListener(marker, "mouseover", function (event) 
{
    this.set('icon', 'http://google.com/mapfiles/ms/micons/yellow-dot.png');
});

google.maps.event.addListener(marker, "mouseout", function (event) 
{
    this.set('icon', 'http://google.com/mapfiles/ms/micons/red-dot.png');
});

当我第一次将鼠标悬停时有闪烁，我认为这是因为地图正在从 URL 加载新图像。

有没有办法预先加载黄色和红色桨标记并将它们存储在缓存中？

【问题讨论】：

标签： google-maps-api-3 google-maps-markers

【解决方案1】：

我不确定此解决方案是否能解决您的具体问题，但请尝试禁用标记的“优化”属性：

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(lat, long), 
   icon: markerIcon, 
   optimized: false
});

这解决了我在 IE 中将标记悬停在某些缩放级别会产生闪烁效果的问题。

【讨论】：

这实际上修复了所有浏览器中的问题。阅读inside the docs 为什么optimized: false 在这种情况下有效

【解决方案2】：

根据Preload marker images for Google Maps，您可以尝试将图像 URL 放在 <div> 标记中，并将 CSS display 设置为 none，以欺骗浏览器预加载它。

可能还有其他方法（HTML5 清单？），但这似乎是一种快速简单的尝试解决方案。（如果它不起作用，那么执行和撤消都不需要太多努力。如果您尝试一下，我很想知道它是否适合您。）

在您的情况下，您可以通过在您的页面上包含以下内容来对其进行快速而肮脏的测试：

<div style="display:none">
    <img alt="" src="http://google.com/mapfiles/ms/micons/yellow-dot.png"/>
</div>

【讨论】：

您好，我按照您的建议尝试了解决方案，图像闪烁一次。拥有它仍然是一种改进，因为没有它会有一个暂停，不会显示任何标记。
虽然还不是很完美。加载标记图像后，过渡会更加平滑。
发现此问题的任何人：Stuart Cusack 的回答为我解决了比建议的解决方案更好的问题（阅读：完全解决）。