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

Question

我在地图上有一些标记

部分代码在这里

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 marker google maps 答案）

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;