使用Marker()标记地图上的重要地点

Marker()是Google Maps API中一个非常重要的类，用于在地图上标记重要的地点。它可以在地图上的指定位置创建一个图标，并且可以自定义该图标的外观和行为。下面是一些使用Marker()标记地图上重要地点的示例：

1. 基本使用示例：

// 在纽约市的中心位置创建一个地图
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 12,
  center: {lat: 40.7128, lng: -74.0060}
});

// 创建一个标记，放置在纽约市的中心位置
var marker = new google.maps.Marker({
  position: {lat: 40.7128, lng: -74.0060},
  map: map,
  title: '纽约市'
});

这个示例使用Marker()在地图上创建一个标记，并将其放置在纽约市的中心位置。它还设置一个标题，当用户将鼠标悬停在标记上时将显示该标题。

2. 自定义标记的外观和行为：

// 在某个位置创建一个地图
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 16,
  center: {lat: 37.7749, lng: -122.4194}
});

// 创建一个自定义的标记图标
var image = {
  url: 'custom-marker.png',
  size: new google.maps.Size(50, 50),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(25, 25)
};

// 创建一个标记，放置在旧金山市政厅的位置
var marker = new google.maps.Marker({
  position: {lat: 37.7752, lng: -122.4191},
  map: map,
  icon: image,
  animation: google.maps.Animation.BOUNCE
});

在这个示例中，我们使用一个自定义的标记图标，并在创建标记时将其传递给icon属性。我们还设置了标记的动画效果，使其以弹跳的方式在地图上显示。

3. 标记点击事件的处理：

// 在某个位置创建一个地图
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 14,
  center: {lat: 51.5074, lng: -0.1278}
});

// 创建一个标记，放置在伦敦塔的位置
var marker = new google.maps.Marker({
  position: {lat: 51.5081, lng: -0.0759},
  map: map,
  title: '伦敦塔'
});

// 添加点击事件处理器
marker.addListener('click', function() {
  // 放大地图以便更清楚地查看标记
  map.setZoom(18);
  // 移动地图以便标记位于地图的中心
  map.setCenter(marker.getPosition());
});

这个示例演示了如何在标记上添加点击事件处理器。当用户点击标记时，地图将放大并将标记移动到地图的中心。

使用Marker()标记地图上的重要地点可以极大地提高地图的可读性和用户体验。通过自定义标记的外观和行为，可以进一步增加地图的吸引力。