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

Question

出于某种原因，Google 在 Google 地图信息窗口卡片中呈现一个空的 div。我遵循的是通过 initMap() 启动 Google 地图并添加我正在使用的 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

要删除 javascript 中的 div，您可以简单地通过点符号使用 remove() 函数。

就像这样：

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

但是由于您没有特殊 ID 或 class 在您想要的 DOM 项目中，这不是一个解决方案。所以你必须获取父节点并删除它的子节点。您所要做的就是使用 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 上获得 closed/opened。所以这样一来，它就会像一个魅力。

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

这是工作演示的 link：JSFiddle

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

How to remove an empty div created by Google Maps InfoWindow (Close info window on map click also close older info window's when opening new one)

javascript

google-maps

google-maps-api-3

更新

更新 2

更新 3