如何删除由Google Maps InfoWindow创建的空div（在地图上关闭信息窗口，在打开新的div时也单击它也关闭旧信息窗口）

Question

出于某种原因，Google在Google Maps infoWindow卡中呈现了一个空的div。我遵循通过initMap（）初始化Google Maps并添加我正在使用的infoWindow的常规做法：

if (props.content) {

  var infoWindow = new google.maps.InfoWindow({
    content: props.content
  });

  marker.addListener('click', function() {
    infoWindow.open(map, marker);
  });
}

如何删除此div？或将我的内容放在div中？

Answer 1

锁定17小时。已禁用对此答案的评论，但它仍在接受其他交互。 Learn more。

对于在javascript中删除div，您可以简单地通过点表示法使用remove()函数。

就像这样：

document.getElementById("element").remove();

但是由于所需的DOM项目中没有特殊的ID或类，因此无法解决。因此，您必须获取父节点并删除其子节点。您所要做的就是使用removeChild(/*element.lastChild*/)。所以会是这样：

const element = document.querySelector('.gm-style-iw-d');
element.removeChild(element.lastChild);

---

更新

如果要在另一个div中禁用上下文菜单以使它们看起来相同，则有两种方法可以这样做。

首先，您可以通过如下操作HTML本身来做到这一点：

<div oncontextmenu="return false;"></div>

或通过在初始加载后处理DOM：

HTML

<div id='elementId'></div>

Javascript

document.getElementById('elementId').addEventListener('contextmenu', function() {
  return false;
});

更新2

这不是实现所需目标的最佳方法，但是您可以执行以下操作以只要用户单击地图中除标记和对话框本身以外的任何位置，就关闭对话框。根据google map document，您可以使用.close()方法关闭InfoWindow，如下所示：

function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
  });

  // Check for custom icon
  if (props.iconImage) {
    // Set icon image
    marker.setIcon(props.iconImage);
  }

  // Check content
  if (props.content) {

    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
      setTimeout(() => {
        var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
      }, 1);
    });
  }
  google.maps.event.addListener(map, "click", function(event) {
    infoWindow.close();
  });
}

更新3

要关闭旧的infoWindow，您应该创建一个唯一的infoWindow并将其内容更新为只有每个marker.click都已关闭/打开的内容。因此，这种方式将像一种魅力一样发挥作用。

var infoWindow = null;

// Add marker function
function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
    // icon: './img/marker1.png'
  });

  // Check for custom icon
  if (props.iconImage) {
    // Set icon image
    marker.setIcon(props.iconImage);
  }

  // Check content
  if (props.content) {

    google.maps.event.addListener(marker, 'click', function() {
      if (infoWindow) {
        infoWindow.close();
      }
      infoWindow = new google.maps.InfoWindow({
        content: props.content
      });
      infoWindow.open(map, marker);

      setTimeout(() => {
        var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
      }, 10);

    });
  }
  google.maps.event.addListener(map, "click", function(event) {
    infoWindow.close();
  });
}

这里是工作演示的链接：JSFiddle