// 初始化地图
function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 39.9042, lng: 116.4074} // 北京坐标
  });

  // 创建多个标记
  const locations = [
    {lat: 39.9042, lng: 116.4074, title: '北京'},
    {lat: 31.2304, lng: 121.4737, title: '上海'},
    {lat: 23.1291, lng: 113.2644, title: '广州'},
    {lat: 22.5431, lng: 114.0579, title: '深圳'}
  ];

  locations.forEach(location => {
    const marker = new google.maps.Marker({
      position: location,
      map: map,
      title: location.title
    });

    // 添加点击事件监听器
    marker.addListener('click', () => {
      animateMarker(marker);
    });
  });
}

// 标记动画函数
function animateMarker(marker) {
  // 停止之前的动画
  marker.setAnimation(null);
  
  // 开始弹跳动画
  marker.setAnimation(google.maps.Animation.BOUNCE);
  
  // 3秒后停止动画
  setTimeout(() => {
    marker.setAnimation(null);
  }, 3000);
}

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 39.9042, lng: 116.4074}
  });

  const infowindow = new google.maps.InfoWindow();
  let activeMarker = null;

  const locations = [
    {lat: 39.9042, lng: 116.4074, title: '北京', content: '中国首都'},
    {lat: 31.2304, lng: 121.4737, title: '上海', content: '中国经济中心'},
    {lat: 23.1291, lng: 113.2644, title: '广州', content: '广东省省会'},
    {lat: 22.5431, lng: 114.0579, title: '深圳', content: '科技创新城市'}
  ];

  locations.forEach(location => {
    const marker = new google.maps.Marker({
      position: location,
      map: map,
      title: location.title
    });

    marker.addListener('click', () => {
      // 如果已经有活动的标记，停止其动画
      if (activeMarker) {
        activeMarker.setAnimation(null);
      }
      
      // 设置当前标记为活动标记
      activeMarker = marker;
      
      // 显示信息窗口
      infowindow.setContent(`<h3>${location.title}</h3><p>${location.content}</p>`);
      infowindow.open(map, marker);
      
      // 执行动画
      animateMarker(marker);
    });
  });
}

function animateMarker(marker) {
  // 弹跳动画
  marker.setAnimation(google.maps.Animation.BOUNCE);
  
  // 3秒后停止动画
  setTimeout(() => {
    marker.setAnimation(null);
  }, 3000);
}

// 自定义旋转动画
function rotateMarker(marker, angle) {
  const icon = marker.getIcon();
  if (icon) {
    icon.rotation = angle;
    marker.setIcon(icon);
  }
}

// 使用自定义动画
let rotationAngle = 0;
const rotationInterval = setInterval(() => {
  rotationAngle = (rotationAngle + 10) % 360;
  rotateMarker(marker, rotationAngle);
}, 50);

// 停止动画
setTimeout(() => {
  clearInterval(rotationInterval);
}, 3000);