Как сделать так, чтобы изображение маркера в Google Maps мигало

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 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

Мне не удалось заставить анимационные картинки выглядеть хорошо, поэтому я попробовал другой подход, основанный на этой демонстрации на 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;

Answer 4

Используйте анимированный GIF, который мигает.