從Google Maps API V3刪除標記

Question

我有一張要通過復選框添加標記（帶有信息窗口）的地圖。 它也可以很好地工作，但是當我取消選中復選框時，我只是無法再次將其刪除。 有人可以幫忙嗎？

另請參閱此處： 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);
    });
}

Answer 1

您必須使用一個外部數組，其中包含與地圖一起使用的額外標記。 在您的情況下，我添加了以下數組：

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);
        }
    }
);

Answer 2

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); 
        }
}

Answer 3

嘗試這個：

marker300.setMap(null);

Answer 4

您的標記在showOverlays()函數之外不可見。 在控制台中報告了錯誤：

Uncaught ReferenceError: marker300 is not defined

最小的變化是將marker300定義為全局：

var map;
var marker300; 

並刪除標記

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

並在函數showOverlays()刪除變量marker300前面的var

參見小提琴中的示例

如果您想要多個標記，則必須遵循用戶Merianos Nikos的解決方案