Google Maps API点击标记后原标记消失问题求助

阿华AIGC实验室

2026-5-15

搞定这个标记消失的问题！

我一眼就看出问题所在了：你在clicktoOpenMAp函数里重新初始化了一个全新的Google Maps实例，直接替换了页面上的#map容器——这就等于把之前创建的所有标记（包括你最开始的那个）全清掉了。要实现点击原标记后保留它再添加新标记，咱们只需要复用已经创建好的地图实例就行，根本不用重新初始化地图。

下面是修改好的完整代码，替换你的代码就能用，记得把YOUR_GOOGLE_API_KEY换成你自己的密钥：

<!DOCTYPE html>
<html>
<head>
    <style>
        #map { height: 400px; width: 100%; }
    </style>
</head>
<body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
        // 把核心实例存成全局变量，方便后续复用
        let map;
        let originalMarker;
        let originalInfoWindow;
        let newMarkersInfoWindow;

        function initMap() {
            const uluru = {lat: 25.2138, lng: 75.8648};
            // 初始化一次地图就行，别重复创建
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 8,
                center: uluru
            });

            // 创建原标记并保存下来
            originalMarker = new google.maps.Marker({
                position: uluru,
                map: map
            });

            originalInfoWindow = new google.maps.InfoWindow({
                content: 'Hello World!'
            });

            // 原标记的事件监听保留
            originalMarker.addListener('click', function() {
                addNewMarkersToMap(); // 改成添加新标记的函数，不再重建地图
            });

            originalMarker.addListener('mouseover', function() {
                originalInfoWindow.open(map, this);
            });

            originalMarker.addListener('mouseout', function() {
                originalInfoWindow.close();
            });

            // 初始化新标记用的信息窗口
            newMarkersInfoWindow = new google.maps.InfoWindow();
        }

        function addNewMarkersToMap() {
            const bounds = new google.maps.LatLngBounds();
            // 你的新标记数据
            const markersData = [
                ['chittorgarh', 24.8887, 74.6269],
                ['morak', 24.7265, 75.9739],
                ['mangrol', 25.3362, 76.5112]
            ];

            // 遍历添加新标记到已有地图上
            for(let i = 0; i < markersData.length; i++) {
                const position = new google.maps.LatLng(markersData[i][1], markersData[i][2]);
                bounds.extend(position);
                const newMarker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: markersData[i][0]
                });

                // 给新标记加点击事件
                google.maps.event.addListener(newMarker, 'click', (function(marker, index) {
                    return function() {
                        newMarkersInfoWindow.setContent(markersData[index][0]);
                        newMarkersInfoWindow.open(map, marker);
                    }
                })(newMarker, i));
            }

            // 把原标记的位置也加入边界，确保地图能显示所有标记
            bounds.extend(originalMarker.getPosition());
            map.fitBounds(bounds);

            // 限制缩放级别，避免自动缩得太小
            const boundsListener = google.maps.event.addListener(map, 'bounds_changed', function() {
                this.setZoom(8);
                google.maps.event.removeListener(boundsListener);
            });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap"></script>
</body>
</html>