Question

我是谷歌地图技术的新手。我想在一段时间内闪烁或反弹谷歌地图标记，例如一分钟。是否可以这样做？你能告诉我一个成功的方法吗？

Answer 1

google.maps.Marker班级支持setAnimation(animation:Animation)方法，根据docs：

开始动画。任何正在进行的动画都将被取消目前支持的动画有：BOUNCE，DROP。传入null将导致任何动画停止。

所以你可以打电话

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

开始弹跳动画和

marker.setAnimation(null);

阻止它。工作示例：

＆＃13;

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);
      }

＆＃13;

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

＆＃13;

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

Answer 2

可能会导致错误。（使用没有apikey的googlemap）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我建议对于闪烁的地图标记，您可以使用 .gif 文件，因为谷歌地图标记不支持闪烁动画。

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

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

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

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

3 个答案: