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;

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

4 个答案: