从Google Maps API V3中删除标记

Remove marker from Google Maps API V3

本文关键字：删除 V3 Google Maps API      更新时间：2023-09-26

我有一个地图，我想通过复选框添加一个标记（带有信息窗口）。它也运行得很好，但当我取消选中复选框时，我无法再次将其删除。有人能帮忙吗？

另请参见此处：http://jsfiddle.net/x8D7y/

function clearOverlays() {
    google.maps.event.clearListeners(marker300, 'click');
}
function showOverlays() {
    var marker300 = new google.maps.Marker({
        position: new google.maps.LatLng(45.0, 1.0),
        map: map /*,
        icon: 'img/bike5.png' */
    });
    var infowindow300 = new google.maps.InfoWindow({
        content: '<div style="width: 200px;">Test 300 - <a href="http://www.google.com" target="_blank">Link</a></div>'
    });
    google.maps.event.addListener(marker300, 'click', function() {
        infowindow300.open(map, marker300);
    });
}

您必须使用一个外部数组，该数组包含您在地图中使用的额外标记。在您的情况下，我添加了以下数组：

var extraMarkers = [];

然后，当我单击复选框时，我将获得该复选框的ID，并将其作为函数参数发送到showOverlays()和clearOverlays()中。

然后，在showOverlays()中，我使用复选框ID作为extraMarkers键，使用标记作为值。

最后，在clearOverlays()中，我再次使用复选框ID从extraMarkers数组中获取具有此ID的元素，并看到到null的映射，以便删除标记。

请参见此处的工作示例：http://jsfiddle.net/x8D7y/1/

以下是您需要的完整代码：

var map;
var extraMarkers = [];
var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(45.0, 1.0)
};
map = new google.maps.Map($('#map')[0], myOptions);
var marker1 = new google.maps.Marker(
    {
        position: new google.maps.LatLng(45.5, 1.5),
        map: map /*,
        icon: 'img/bike5.png' */
    }
);
var infowindow1 = new google.maps.InfoWindow(
    {
        content: '<div style="width: 200px;">Test 1 - <a href="http://www.google.com" target="_blank">Link</a></div>'
    }
);
google.maps.event.addListener(
    marker1, 
    'click', 
    function()
    {
        infowindow1.open(map, marker1);
    }
);
function clearOverlays(myID)
{
    google.maps.event.clearListeners(extraMarkers[myID], 'click');
    extraMarkers[myID].setMap(null);
}
function showOverlays(myID)
{
    var marker300 = new google.maps.Marker(
        {
            position: new google.maps.LatLng(45.0, 1.0),
            map: map /*,
            icon: 'img/bike5.png' */
        }
    );
    extraMarkers[myID] = marker300;
    var infowindow300 = new google.maps.InfoWindow(
        {
            content: '<div style="width: 200px;">Test 300 - <a href="http://www.google.com" target="_blank">Link</a></div>'
        }
    );
    google.maps.event.addListener(
        marker300, 
        'click', 
        function()
        {
            infowindow300.open(map, marker300);
        }
    );
}
$('#mapall').change(
    function()
    {
        var myID = $(this).attr('id');
        if($('#mapall').attr('checked'))
        {
            showOverlays(myID);
        }
        else
        {
            clearOverlays(myID);
        }
    }
);

if you have single marker on map then use marker.setMap(null);
if Multiple marker make an array for marker
 markersArray.push(marker);
 if (markersArray) {
     for (i in markersArray) { 
             markersArray[i].setMap(null); 
        }
}

试试这个：

marker300.setMap(null);

您的标记在showOverlays()函数之外不可见。控制台中报告错误：

Uncaught ReferenceError: marker300 is not defined

最小的变化是将marker300定义为全局：

var map;
var marker300;

并删除中的标记

function clearOverlays() {
    google.maps.event.clearListeners(marker300, 'click');
    marker300.setMap(null);
}

并删除函数showOverlays() 中变量标记300前面的var

参见fiddle 中的示例

如果你想有几个标记，你必须遵循用户Merianos Nikos

的解决方案
相关文章：