Google Maps单标记控制异常：两种标记创建函数冲突求助

我开发的基于Google Maps的PWA支持三种添加标记的方式：

• 点击地图目标位置添加标记
• 点击按钮在当前位置添加标记
• 输入地址添加（地理编码功能暂未实现）

目前前两种功能已实现，但存在标记替换异常：

• 点击地图添加标记后，再点击定位按钮，旧标记可正常移除（符合预期）
• 点击定位按钮添加标记后，再点击地图，旧标记无法移除（不符合预期）

相关JavaScript代码如下：

var map2;
var marker2;
function initialize2() {

    google.maps.controlStyle = 'azteca';
    var mapOptions2 = {
        zoom: 15,
        minZoom: 12,
        maxZoom:19,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        streetViewControl: false,
        fullscreenControl: false,
        gestureHandling: "greedy",

        center: new google.maps.LatLng(41.727751, 1.827424),
        restriction: {
            latLngBounds: {
              north: 41.753,
              south: 41.715,
              east: 1.857,
              west: 1.806,
            },
          },
        
        styles: [{ // VISIBLE BARS RESTAURANTS
            featureType: "poi",
            stylers: [{ visibility: "off" }],
        }, {
            featureType: "poi.park",
            stylers: [{ visibility: "on" }],
        }, {
            featureType: "poi.park",
            elementType: "labels",
            stylers: [{ visibility: "off" }],
        }, {
            featureType: "transit",
            stylers: [{ visibility: "off" }],
        }]
    };
    
    
    
    map2 = new google.maps.Map(document.getElementById('map-canvas-inseg'), mapOptions2);

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(onSuccessGeolocating);
        
    }
 
// Add marker when map is clicked (and overwrite when it is clicked again)
   

    google.maps.event.addListener(map2, 'click', function(event) {
        placeMarker(event.latLng);
    });

    function placeMarker(location) {

        if (marker2 == null)
            {
                marker2 = new google.maps.Marker({
                position: location,
                map: map2
                }); 
            } 
        else
            {
                marker2.setPosition(location); 
            } 

    }

    
    
    function onSuccessGeolocating(position) {

        var circleBigOpt = {
            center: new google.maps.LatLng(position.coords.latitude,position.coords.longitude), 
            map: map2,
            radius: position.coords.accuracy,
            fillColor:"#4285f4",
            fillOpacity:0.1,
            strokeWeight:0
        };
    
        var circleBig = new google.maps.Circle(circleBigOpt);
    
    
            
    
        var positionMarkerOptions = {
            position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 10,
                fillColor: '#4285f4',
                fillOpacity: 1,
                strokeColor: '#ffffff',
                strokeWeight: 1
            },
            map: map2
            };
    
        var marker = new google.maps.Marker(positionMarkerOptions);

        map2.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
    
        // Function that adds marker on the user's current location, when button "boto-marcarMapa" is clicked
        

    
        document.getElementById("boto-marcarMapa").addEventListener("click", function( event ) {
            
           if (marker2 == null) 
            { 
                marker2 = new google.maps.Marker({
                position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
                map: map2
            });
            }
            else 
            {
                //marker2.setPosition(position);
                marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
                    map: map2
                });
            }

            //marker2.setMap(null);
            
        });
    
    }



}
window.addEventListener('load', initialize2);

补充说明：marker2是用户通过交互创建的标记，marker是定位成功后自动显示的蓝色圆点。尝试过将marker2设为全局变量、将现有标记设为null等方法，均未解决问题。

问题根源 #

定位按钮的点击事件处理逻辑错误：当marker2已存在时，直接创建新的Marker实例并赋值给marker2，但原来的Marker实例并未从地图上移除，导致地图上同时存在两个标记。而placeMarker函数仅操作当前marker2变量指向的实例，旧标记就成了无法被控制的残留标记。

修复方案 #

将定位按钮点击事件中的else分支逻辑修改为和placeMarker函数一致，直接更新现有marker2的位置，而非创建新实例：

document.getElementById("boto-marcarMapa").addEventListener("click", function( event ) {
    var targetLatLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    if (marker2 == null) 
    { 
        marker2 = new google.maps.Marker({
            position: targetLatLng,
            map: map2
        });
    }
    else 
    {
        marker2.setPosition(targetLatLng);
    }
});

如果需要替换标记样式（比如和地图点击的标记样式不同），可以先移除旧标记再创建新的：

document.getElementById("boto-marcarMapa").addEventListener("click", function( event ) {
    var targetLatLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    // 先移除旧标记
    if (marker2) {
        marker2.setMap(null);
    }
    // 创建新标记
    marker2 = new google.maps.Marker({
        position: targetLatLng,
        map: map2
    });
});

额外优化建议 #

可以将标记创建/更新的逻辑封装成通用函数，避免重复代码：

function updateMarker(location) {
    if (marker2 == null) {
        marker2 = new google.maps.Marker({
            position: location,
            map: map2
        });
    } else {
        marker2.setPosition(location);
    }
}

// 地图点击事件调用
google.maps.event.addListener(map2, 'click', function(event) {
    updateMarker(event.latLng);
});

// 定位按钮点击事件调用
document.getElementById("boto-marcarMapa").addEventListener("click", function( event ) {
    var targetLatLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    updateMarker(targetLatLng);
});

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