自定义标记大小谷歌地图颤动

在谷歌地图中，我们经常使用标记来标识某个地点的位置。然而，默认情况下标记的大小是固定的。如果我们想要调整标记的大小或者让标记产生颤动的效果该怎么办呢？下面将介绍如何自定义标记大小并实现颤动效果。

自定义标记大小

通过设置标记的icon属性，我们可以自定义标记的大小。通常情况下，我们可以使用.png格式的图片作为标记。首先，我们需要定义一个标记，然后将其添加到地图上。代码如下：

// 定义标记
var marker = new google.maps.Marker({
  position: {lat: 39.9042, lng: 116.4074}, // 标记位置
  map: map, // 绑定地图
  title: '北京', // 鼠标悬停提示信息
  icon: {
    url: 'marker.png', // 标记图片
    scaledSize: new google.maps.Size(50, 50) // 标记尺寸
  }
});

// 添加标记到地图
marker.setMap(map);

在上面的代码中，我们创建了一个25x25像素的标记，并将其添加到了地图上。如果我们需要创建不同大小的标记，只需修改scaledSize属性的值即可。

实现颤动效果

在某些场景下，我们希望标记在地图上展示时能够产生一些动态效果，例如颤动。谷歌地图本身并不支持颤动效果，但我们可以结合CSS3的animation属性和 JavaScript的setInterval()方法来实现。

首先，我们需要创建一个包含颤动动画的css类，代码如下：

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

.shake {
  animation: shake 0.3s infinite alternate;
}

这里我们定义了一个名为shake的动画效果，让标记旋转10度来回颤动，并将其应用到CSS类.shake中。接下来，我们在JavaScript代码中定义一个计时器，在指定时间间隔内将颤动样式应用到标记上即可。代码如下：

// 定义标记
var marker = new google.maps.Marker({
  position: {lat: 39.9042, lng: 116.4074}, // 标记位置
  map: map, // 绑定地图
  title: '北京', // 鼠标悬停提示信息
  icon: {
    url: 'marker.png', // 标记图片
    scaledSize: new google.maps.Size(50, 50) // 标记尺寸
  }
});

// 应用颤动效果
setInterval(function() {
  marker.getIcon().url = 'marker.png';
  marker.setIcon(marker.getIcon());
  marker.setAnimation(google.maps.Animation.BOUNCE);
  setTimeout(function() {
    marker.setAnimation(null);
  }, 750); // 控制颤动时间
}, 5000); // 控制颤动间隔

在上面的代码中，我们定义了一个计时器，每隔5秒钟产生一次颤动效果。当颤动开始时，我们将标记的图标设置为普通图标，然后再将其设置为使用.shake类产生的颤动效果。颤动结束后，我们再将标记的动画效果设为null。

完成上述代码后，你就可以在谷歌地图上实现自定义标记大小并且颤动的效果啦！