如何使用Google Maps插件在标记上添加标记和设置自定义点击事件？

要在Google Maps上的标记上添加标记并设置自定义点击事件，你需要遵循以下步骤：

基础概念

Google Maps JavaScript API允许开发者将交互式地图嵌入到网页中，并在地图上添加标记（Markers）。标记可以用来表示特定的位置点，用户可以点击这些标记以获取更多信息。

类型

简单标记：基本的地图标记。
带信息窗口的标记：点击标记时显示详细信息的弹出窗口。
自定义图标标记：使用自定义图像作为标记。

应用场景

导航应用
房地产列表
餐厅定位
旅游景点指示

实现步骤

获取API密钥：首先，你需要在Google Cloud Platform上创建一个项目并启用Google Maps JavaScript API，然后获取API密钥。
引入API：在你的HTML文件中引入Google Maps JavaScript API。

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps Markers</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
    <script src="map.js"></script>
</head>
<body onload="initMap()">
    <div id="map" style="width: 100%; height: 400px;"></div>
</body>
</html>

初始化地图：在JavaScript文件中初始化地图并添加标记。

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: {lat: -34.397, lng: 150.644}
    });

    var marker = new google.maps.Marker({
        position: {lat: -34.397, lng: 150.644},
        map: map,
        title: 'Hello World!'
    });

    // 设置自定义点击事件
    marker.addListener('click', function() {
        alert('Marker clicked!');
    });
}