为什么 setMap(null) 无法使用谷歌地图 api v3？答案

【问题标题】：why setMap(null) is not working google maps api v3?为什么 setMap(null) 无法使用谷歌地图 api v3？
【发布时间】：2012-12-15 11:49:03
【问题描述】：

我使用的是google maps api 3.9。在应用程序中用户可以添加标记或删除标记。当用户单击地图时，将显示一个信息窗口。用户可以在其中输入名称、纬度、经度并单击保存图像，如下所示：

google.maps.event.addListener(map, 'click', function(event) {

  point = new google.maps.Marker({
    position: event.latLng
    , map: map
    , icon: 'resource/image/mapIcons/point.png'
    , id: id
    , type:"point"
  });

  type = point.type;
  newPoint = true;
  existingPoint = false;
  markerObj = this;

  inputInfowindow.setContent("<table style='width:92%;' id='inputTable'>" +
                             "<tr> <td>point</td> </tr>" +
                             "<tr> <td><input class='infoInput' type='text' id='name' placeholder='name'/> </td> </tr>" +
                             "<tr> <td><input class='infoInput'type='text' id='lat' placeholder='latitude'/></td> </tr>" +
                             "<tr> <td><input class='infoInput'type='text' id='lon' placeholder='longitude'/></td> </tr>" +
                             "<tr><td><input type='image' src='resource/image/mapIcons/save.png' onclick='save()' class='saveImage' alt='save'/> </td></tr>");

  event1 = event.latLng;
  currentMarker = point;
  inputInfowindow.open(map,point);

});

标记保存在数据库中。当用户单击删除按钮时，将调用以下方法：

function deleteMarker(id,rev) {
  var marker  = markerObj;
  markerObj = undefined;
  var x = confirm("are you sure to delete marker?");
  if(x){
    deleteLocations(id,rev);//removes marker details from DB
    if(marker){
      console.log(marker);
      marker.setMap(null);
    }
  }
}

但是在marker.setMap(null);标记已从地图中删除，仍然在地图上。我检查了 console.log(marker);标记对象正确出现，控制台上没有错误。我进行了很多谷歌搜索但没有结果。请帮助解决这个问题。

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

marker.setMap(null) 不会删除对象，只会隐藏它。要删除它，请执行marker = null;

【讨论】：

@P Srinivas goud ，两者都做！ (marker.setMap(null) 后跟 marker = null;)

【解决方案2】：

来自文档-

要从地图中移除叠加层，请调用叠加层的 setMap() 方法，传递空值。请注意，调用此方法不会删除覆盖;它只是删除地图上的叠加层。如果相反，你希望删除覆盖，您应该将其从地图中删除，并且然后将叠加层本身设置为 null。

所以在marker.setMap(null) 之后你还应该写marker=null

更新1-

function deleteMarker(id,rev) {
  var x = confirm("are you sure to delete marker?");
  if(x)
  {
    deleteLocations(id,rev);//removes marker details from DB
    if(markerObj)
    {
       console.log(markerObj);
       markerObj.setMap(null);
       markerObj=null;
    }
  }
}

更新 2-

这是一个简单的演示。查看代码并检查您的代码错误的地方。您的代码中可能存在一些变量范围问题。

WORKING DEMO

【讨论】：

看起来代码中有一些不需要的声明。查看更新。 markerObj 也是在这个函数中持有标记实例吗？
是的，我试过你的更新还是一样的结果。这是浏览器缓存问题
这到底是什么意思-marker is removed from map still its on map在你的问题中？
查看添加的演示。你应该有一个变量范围的问题。

【解决方案3】：

在地图点击事件中，您将 this 分配给 markerObj。虽然 this 指的是地图对象而不是标记对象。

改成

markerObj = point;

它应该可以按预期工作。

【讨论】：

当我重新加载页面并删除现有标记时，我尝试了但结果仍然相同。

【解决方案4】：

我遇到了类似的错误，但我不确定我的解决方案是否适用于你的情况。我设置了我的代码，以便当我的页面加载时，地图将被我的坐标中的任何标记填充数据库。然后我允许用户向数据库添加更多点，然后在用户在地图上选择的位置添加一个标记。

我没有意识到，每当在我的数据库中更改或创建坐标时，我的代码都会将标记重新添加到地图上的所有坐标中。因此，每当我创建一个点时，我都会手动向坐标添加标记，并且我的数据库正在向坐标添加标记。因此，当我认为我的代码被破坏时，真正发生的是我正在删除同一位置的两个点之一。

所以我不知道你是如何从数据库中提取坐标和标记的，但值得研究一下。

【讨论】：

【解决方案5】：

我有同样的问题。你应该在markers[index].setMapp(null) 之前调用这些方法：

map.setCenter(desMarker[index].getPosition());
desMarker[index].setPosition(null);

在这些调用之后：

markers[index].setMapp(null)

【讨论】：