使用Marker()在地图上标记地点的方法

使用Marker()在地图上标记地点的方法是通过Google Maps API来实现的，Marker()是一个类，用来在地图上创建可点击的标记。

以下是一个使用Marker()在地图上标记地点的使用例子：

1. 导入Google Maps API

首先，在HTML文件的头部导入Google Maps API：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

注意替换YOUR_API_KEY为你自己的Google Maps API密钥。

2. 创建地图

在JavaScript中创建一个函数 initMap() 来创建地图对象，并将其绑定到页面的某个元素上：

function initMap() {
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: 40.7128, lng: -74.0060}
  });
}

这里创建了一个zoom为12的地图，并将其中心设置在纽约的经纬度位置。

3. 添加标记

在 initMap() 函数中，使用Marker()类来添加标记。可以设置标记的位置、标题、图标等。

function initMap() {
  // 创建地图对象
  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: 'New York City'
  });

  // 添加点击事件
  marker.addListener('click', function() {
    // 在点击标记时执行的操作
    alert('Marker clicked!');
  });
}

在上述代码中，首先创建了一个标记对象 marker，设置了其位置为纽约的经纬度，然后将其添加到地图上。还设置了标记的标题为 'New York City'。然后添加了一个点击事件，当点击标记时，会弹出一个提示框。

4. 在页面上显示地图

最后，在HTML文件中，创建一个包含一个元素的div，并给其一个id，用来显示地图：

<div id="map" style="width: 100%; height: 400px;"></div>

将其放置在适当的位置上。

通过上述步骤，就可以使用Marker()在地图上标记地点，并添加相应的点击事件。可以根据需要定制标记的样式和行为。