如何通过Marker()在地图上添加标记点的动画效果

发布时间：2023-12-19 06:14:14

通过Marker()在地图上添加标记点的动画效果可以通过以下步骤实现：

步骤1：准备工作

在开始添加动画效果之前，我们需要先导入相关的地图库和创建地图容器。在这个例子中，我们将使用Google Maps API来创建地图容器。

<!DOCTYPE html>
<html>
<head>
  <title>Animate Marker on Google Map</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  <script>
    // 初始化地图
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 37.7749, lng: -122.4194}
      });
      
      // 添加标记点
      var marker = new google.maps.Marker({
        position: {lat: 37.7749, lng: -122.4194},
        map: map
      });
    }
  </script>
</body>
</html>

步骤2：添加动画效果

要给标记点添加动画效果，我们可以使用Marker类的setAnimation()方法。该方法接受一个动画类型作为参数，可以选择的动画类型有google.maps.Animation.BOUNCE（跳动动画）和google.maps.Animation.DROP（下落动画）。

// 添加标记点
var marker = new google.maps.Marker({
  position: {lat: 37.7749, lng: -122.4194},
  map: map,
  animation: google.maps.Animation.BOUNCE // 设置动画效果为跳动动画
});

// 开启动画效果
marker.setAnimation(google.maps.Animation.BOUNCE);

完整的代码示例如下：

<!DOCTYPE html>
<html>
<head>
  <title>Animate Marker on Google Map</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
  <script>
    // 初始化地图
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: {lat: 37.7749, lng: -122.4194}
      });
      
      // 添加标记点
      var marker = new google.maps.Marker({
        position: {lat: 37.7749, lng: -122.4194},
        map: map,
        animation: google.maps.Animation.BOUNCE // 设置动画效果为跳动动画
      });
      
      // 开启动画效果
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  </script>
</body>
</html>

在这个例子中，我们使用了Google Maps API来创建一个地图容器，并在地图上添加了一个标记点。然后，我们将标记点的动画效果设置为跳动动画，并开启了动画效果。当页面加载完成时，标记点将开始跳动。

希望这个例子可以帮助您理解如何通过Marker()在地图上添加标记点的动画效果。