Google Map添加多Marker并点击显示InfoWindow问题排查

问题分析 #

• 动态添加的Marker未绑定点击事件：当前仅给初始创建的Marker绑定了点击逻辑，通过addMarker函数新增的Marker没有绑定任何点击事件，导致点击无响应。
• 位置信息显示异常：直接拼接marker.getPosition()会输出[object Object]，因为它返回的是LatLng对象，需要提取具体经纬度数值。

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <body>
        <h1>My First Google Map Marker</h1>

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

        <script>
            const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            let labelIndex = 0;
            // 复用同一个InfoWindow，避免重复创建实例
            let infoWindow;

            function initMap() {
                const defaultLoc = { lat:1.31170, lng:103.77495 };
                const map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 12,
                    center: defaultLoc
                });

                infoWindow = new google.maps.InfoWindow();

                // 地图点击添加Marker
                google.maps.event.addListener(map, "click", (event) => {
                    addMarker(event.latLng, map);
                })

                // 创建初始Marker并绑定点击事件
                const marker = new google.maps.Marker({
                    position: defaultLoc,
                    map: map,
                });
                bindMarkerClick(marker, map);
            }

            function addMarker(location, map) {
                const marker = new google.maps.Marker({
                    position: location,
                    label: labels[labelIndex++ % labels.length],
                    map: map,
                });
                // 给新Marker绑定点击事件
                bindMarkerClick(marker, map);
            }

            // 统一处理Marker点击逻辑的函数
            function bindMarkerClick(marker, map) {
                google.maps.event.addListener(marker, "click", function () {
                    const pos = marker.getPosition();
                    // 格式化经纬度显示
                    const content = `<p>Marker Location:<br>纬度: ${pos.lat().toFixed(5)}<br>经度: ${pos.lng().toFixed(5)}</p>`;
                    infoWindow.setContent(content);
                    infoWindow.open(map, marker);
                });
            }

            window.initMap = initMap;
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=<google map api key>&callback=initMap"></script>
    </body>
</html>

关键修改说明 #

• 全局声明infoWindow，复用同一个弹窗实例，避免冗余创建
• 新增bindMarkerClick函数，统一处理所有Marker的点击事件，减少重复代码
• 在addMarker函数中，创建新Marker后立即绑定点击事件
• 通过pos.lat()和pos.lng()提取具体经纬度数值，并用toFixed(5)优化显示精度

内容的提问来源于stack exchange，提问作者James Khor