Javascript 从谷歌地图API V3中删除标记

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

另见此处：

函数clearOverlays（）{ google.maps.event.clearListeners（marker300，'click'）； } 函数showOverlays（）{ var marker300=新的google.maps.Marker({ 位置：新google.maps.LatLng（45.0,1.0）， map:map/*， 图标：“img/bike5.png”*/ }); var infowindow300=新建google.maps.InfoWindow({ 内容：“测试300-” }); google.maps.event.addListener（marker300，'click'，function（）{ infowindow300.open（地图，marker300）； }); }

---

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

var extraMarkers = [];

然后，当我单击复选框时，我将获得该复选框的ID，并将其作为函数参数发送到

showOverlays（）

和

clearOverlays（）

然后，在

showOverlays（）

中，我将复选框

ID

用作外部标记键，将标记用作值

最后，在

clearOverlays（）

中，我再次使用复选框

ID

从extraMarkers数组中获取具有此ID的元素，并看到映射到

null

，以便删除标记

请参见下面的工作示例：

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

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

var映射；
var=[]；
变量myOptions={
缩放：8，
中心：新google.maps.LatLng（45.0,1.0）
};
map=new google.maps.map（$（'#map'）[0]，myOptions）；
var marker1=新的google.maps.Marker(
{
位置：新google.maps.LatLng（45.5,1.5），
map:map/*，
图标：“img/bike5.png”*/
}
);
var infowindow1=新建google.maps.InfoWindow(
{
内容：“测试1-”
}
);
google.maps.event.addListener(
marker1，
“点击”，
函数（）
{
信息窗口1.打开（地图，标记1）；
}
);
函数clearOverlays（myID）
{
google.maps.event.clearListeners（extramarks[myID]，“click”）；
extraMarkers[myID].setMap（空）；
}
函数showOverlays（myID）
{
var marker300=新的google.maps.Marker(
{
位置：新google.maps.LatLng（45.0,1.0），
map:map/*，
图标：“img/bike5.png”*/
}
);
extraMarkers[myID]=marker300；
var infowindow300=新建google.maps.InfoWindow(
{
内容：“测试300-”
}
);
google.maps.event.addListener(
marker300，
“点击”，
函数（）
{
infowindow300.open（地图，marker300）；
}
);
}
$（'#mapall'）。更改(
函数（）
{
var myID=$（this.attr（'id'）；
if（$（'#mapall'）.attr（'checked'））
{
显示覆盖图（myID）；
}
其他的
{
透明覆盖层（myID）；
}
}
);

试试这个：

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（）中变量marker300前面的

var

看

---

如果您想拥有多个标记，则必须遵循用户Merianos Nikos提供的解决方案

如果您得到了正确答案，请将其标记为正确，以便保存StackOverflow中其他成员的领带

var map;
var marker300; 

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