如何使谷歌地图中的标记图像闪烁

我在地图上有一些标记

代码的一部分在这里

var icons=["media/green.png","media/red.png","media/blue.png","media/yellow.png"]; var marker = new google.maps.Marker({ position: new google.maps.LatLng(100*array_lat[j],100*array_lon[j]), map : map, url : "javascript:setNavtrack('DISPLAYDATA')", icon : icons[i] }); 

按照我的意愿，我想要闪烁“media / red.png”图标

有解决方案吗

Answer 1

您可以尝试更改media / red.png以获取“闪烁”的media / red.gif，如果它不起作用，请将marker.optimized更改为false :(代码来自.gif标记google maps answer）

 var marker = new google.maps.Marker({ position: latLng, map: map, icon: iconoMarca, optimized: false }); 

看起来像：

 var icons=["media/green.png","media/red.gif","media/blue.png","media/yellow.png"]; var marker = new google.maps.Marker({ position: new google.maps.LatLng(100*array_lat[j],100*array_lon[j]), map : map, url : "javascript:setNavtrack('DISPLAYDATA')", icon : icons[i], optimized:false }); 

Answer 2

  var marker = new google.maps.Marker({ map: map, position: mapOptions.center }); interval = setInterval(function() { toggleMarker() }, 500); function toggleMarker() { if (marker.getVisible()) { marker.setVisible(false); } else { marker.setVisible(true); } } 

Answer 3

使用动画gif，闪烁。

Answer 4

我无法让GIF动画看起来很好，所以我尝试了一种基于YouTube“ Localmind ”的演示的不同方法。 结果非常好。 这是我用来使其工作的代码部分。 请注意，我正在使用一些包装器和实用程序，因此您必须进行一些翻译或删除部分。

 // setup the selection state that is needed var circle, intervalWaitCount = 10, startingStrokeWeight = 1, circleOptions = { radius: 0, // in meters strokeOpacity: 1, strokeColor: red, strokeWeight: startingStrokeWeight, fillOpacity: 0, map: map, center: marker.position }; // remove from the last selected if (components.MapWrapper.lastSelectedMarker) { components.MapWrapper.lastSelectedMarker.circle.setVisible(false); window.clearInterval(components.MapWrapper.lastSelectedMarker.interval); } if (marker.circle) { marker.circle.setVisible(!marker.circle.getVisible()); circle = marker.circle; } else { circle = new google.maps.Circle(circleOptions); marker.circle = circle; } marker.interval = window.setInterval(function () { if (intervalWaitCount > 5) { intervalWaitCount--; return; } var radius = circle.getRadius(); circleOptions.strokeColor = green; // choose a color, I was changing based on a condition circleOptions.center = marker.position; if (radius <= 50000) { circleOptions.strokeWeight = circleOptions.strokeWeight - 0.1; circleOptions.radius = radius + 10000; circle.setOptions(circleOptions); // don't wait intervalWaitCount = 0; } else { circleOptions.radius = 0; circle.setOptions(circleOptions); circleOptions.strokeWeight = startingStrokeWeight; // wait five cycles before restarting the animation intervalWaitCount = 10; } }, 100); components.MapWrapper.lastSelectedMarker = marker;