如何Google 地图标记按时间间隔闪烁？

Question

我是 Google 地图的新手 technologies.I 想要闪烁或弹跳 google 地图标记一个时间间隔，例如一个 minute.Is 可以做到吗？你能告诉我一个成功的方法吗？

Answer 1

可能会导致错误。（使用不带 apikey 的 googlemap）

var on = true;
var intervalSeconds = 0.5;
var myLatLng = {lat: -25.363, lng: 131.044};

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  center: myLatLng
});

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});

setInterval(function() {
   if(on) {
     marker.setMap(null);
   } else {
     marker.setMap(map);
   }
  on = !on;
}, intervalSeconds * 1000);

#map {
    width: 800px;
    height: 600px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

Answer 2

google.maps.Markerclass支持setAnimation(animation:Animation)方法，根据docs:

Start an animation. Any ongoing animation will be cancelled. Currently supported animations are: BOUNCE, DROP. Passing in null will cause any animation to stop.

所以你可以打电话给

marker.setAnimation(google.maps.Animation.BOUNCE);

开始弹跳动画和

marker.setAnimation(null);

阻止它。工作示例：

function initMap() {
        var myLatLng = {lat: -25.363, lng: 131.044};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
  
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body onload="initMap();" style="margin:0px; padding:0px;" >
 <div id="map" style="height:400px; width:500px;"></div>
</body>

不支持开箱即用的闪烁动画，但您可以自己创建，该示例已包含在其他答案中。

Answer 3

我建议您可以使用 .gif 文件作为闪烁地图标记，因为 google 地图标记不支持闪烁动画。

只需将图像源更改为 .gif 文件即可。例如。

var mapIcon= "/assets/mapIcon.gif");  
var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: mapIcon,
    optimized: false
  });

[注意] 不要忘记添加 optimized: false 因为有时它无法正常工作。

如何Google 地图标记按时间间隔闪烁？

How to Google Maps marker blink for time interval?

google-maps

blink

google-maps-markers