JavaScript 如何为存储在数组中的Google地图标记添加点击事件

要为存储在数组中的标记添加点击事件，您首先需要使用循环遍历标记数组。然后，在循环内部，可以为每个标记绑定一个点击事件。

语法：

var markers = [marker1, marker2, marker3]; // Array of markers

for (var i = 0; i < markers.length; i++) {
    // Bind a click event to the current marker
    markers[i].addListener('click', function () {
        // Do something when the marker is clicked
    });
}

在这个语法中，markers是一个标记数组，我们使用for循环遍历数组。在循环中，我们使用Google Maps API的addListener方法将点击事件绑定到当前标记。当点击标记时，事件监听函数中的代码将被执行。

问题陈述： “设计一个Google Maps应用程序，允许用户查看和交互地图，在指定位置显示一组标记。该应用程序应包括Google Maps JavaScript API，并使用一个标记数组来表示地图上的位置。当点击标记时，应弹出警报框。”

方法： 解决这个问题，可以采取以下步骤：

在HTML页面中使用提供的指令和代码片段来包含Google Maps JavaScript API。
使用google.maps.Marker构造函数创建一个标记数组，为每个标记指定经纬度坐标。
使用for循环遍历标记数组，并使用Google Maps API的addListener方法将每个标记添加到地图上。
在循环内，使用addListener方法将点击事件绑定到当前标记，并指定在点击标记时弹出警报框的代码。
测试应用程序，以确保标记在地图上正确显示，并且在点击标记时执行指定的操作。
实现： 下面是上述方法的代码实现：

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Google Maps Markers</title> 
    <script src= 
"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> 
    </script> 
    // You need to pass your own generated map API key 
</head> 
  
<body> 
    <div id="map" style="width: 400px; height: 400px;"></div> 
    <script> 
        // Create a map 
        var map = new google 
            .maps.Map(document.getElementById('map'), { 
                zoom: 10, 
                center: { lat: 37.78, lng: -122.41 } 
            }); 
  
        // Create an array of markers 
        var markers = [ 
            new google.maps.Marker( 
                { 
                    position: { 
                        lat: 37.78, 
                        lng: -122.41 
                    }, 
                    map: map 
                }), 
            new google.maps.Marker( 
                { 
                    position: { 
                        lat: 37.76, 
                        lng: -122.43 
                    }, 
                    map: map 
                }), 
            new google.maps.Marker( 
                { 
                    position: { 
                        lat: 37.75, 
                        lng: -122.45 
                    }, 
                    map: map 
                }) 
        ]; 
  
        // Iterate over the array of markers 
        for (var i = 0; i < markers.length; i++) { 
            // Bind a click event to the current marker 
            markers[i].addListener('click', function () { 
                alert('Marker clicked!'); 
            }); 
        } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 如何为存储在数组中的Google地图标记添加点击事件