为什么 setMap(null) 无法在 google 地图 api v3 上工作？

Question

我正在使用谷歌地图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);标记对象正常，控制台上没有错误。我进行了大量的谷歌搜索，但没有结果。请帮忙解决这个问题。

Answer 1

来自文档-

要从地图中删除叠加层，请调用叠加层的 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-

这是一个可以运行的简单演示。查看代码并检查你的代码哪里错了。您的代码中可能存在一些变量范围问题。

工作演示

Answer 2

marker.setMap(null)

不会删除对象，只会隐藏它。要删除它，请执行

marker = null;

Answer 3

我也有同样的问题。您应该在

markers[index].setMapp(null)

:

之前调用这些方法

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

在这些电话之后：

markers[index].setMapp(null)

Answer 4

对于未来的人，使用“marker.setVisible(false);”为我工作

marker.setVisible(false);//this line works
marker.setMap(null);
marker.setPosition(null);
marker = null;

Answer 5

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

更改为

marker.setVisible(false);//this line works

它应该按预期工作。

Answer 6

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

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

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

Answer 7

Vue + Google 地图标记

如果文档说明对您不起作用并且：

• 您正在使用 Vue
• 您的

  marker.setMap(null);

  位于

  marker.setPosition(null);

  对象中
  • 大概将您的

    marker = null;

    或存储传递给

    markerObj = point;
    

    会导致同样的问题？

问题（？）

我还没有花时间去弄清楚“为什么”（我现在也不会（愤怒的头撞着桌子）），但是存储在 Vue Reactive 对象中的

Marker

会以某种方式破坏事情。

损坏的代码示例

reactive

修复

我必须为我的标记制作一个辅助存储容器，但从未传递给

Marker

。

未损坏代码的示例

vue.ref