如何避免信息窗口在谷歌地图上重叠答案

【问题标题】：How to avoid InfoWindow overlapping on Google Map如何避免信息窗口在谷歌地图上重叠
【发布时间】：2018-08-25 05:09:39
【问题描述】：

我已经看到了与此类似的其他问题 (here)，但我无法从帖子中获得更多信息。这是我尝试实现的方法，但窗口（Site 2 和 Site 4）相互重叠。

可运行的sn-p：

var locations = [
  // Array Format: Site Name, Site Info, Marker lat, Marker lng, InfoWindow lat, InfoWindow lng
  ['Site 1', '<div>' + '<h6>Site 1</h6>' + 'PR 84.68 <br />' + 'kWh 1618' + '</div>', 23.141162, 120.120495, 23.141162, 120.120495],
  ['Site 2', '<div>' + '<h6>Site 2</h6>' + 'PR 84.68 <br />' + 'kWh 1618' + '</div>', 22.711022, 120.541029, 22.711022, 120.541029],
  ['Site 3', '<div>' + '<h6>Site 3</h6>' + 'PR 84.68 <br />' + 'kWh 1618' + '</div>', 23.317840, 120.267284, 23.317840, 120.267284],
  ['Site 4', '<div>' + '<h6>Site 4</h6>' + 'PR 84.68 <br />' + 'kWh 1618' + '</div>', 22.71637, 120.54331, 24.71637, 120.54331],
];

var infowindow = new google.maps.InfoWindow();
var marker, i;

function initMap() {
  var mapOptions = {

    center: {
      lat: 24.56331,
      lng: 120.72904
    },

    zoom: 9,
    gestureHandling: "greedy",
    scrollwheel: false,
    zoomControl: true,
  };

  var map = new google.maps.Map(
    document.getElementById("map-canvas"),
    mapOptions
  );

  setMarkers(map, locations)

  function setMarkers(map, locations) {

    var i

    for (i = 0; i < locations.length; i++) {
      var name = locations[i][0]
      var lat = locations[i][2]
      var long = locations[i][3]
      var latInfo = locations[i][4]
      var longInfo = locations[i][5]

      var latlngset = new google.maps.LatLng(lat, long);

      var marker = new google.maps.Marker({
        title: name,
        position: latlngset,
        winLatLng: winLatLng,
        map: map
      });
      map.setCenter(marker.getPosition())

      var content = locations[i][1];

      var infowindow = new google.maps.InfoWindow()

      var winLatLng = new google.maps.LatLng(latInfo, longInfo);

      google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow, winLatLng) {
        return function() {
          infowindow.setContent(content);
          // infoWindow.setPosition(winLatLng);
          // infowindow.open(map)
          infowindow.open(map, marker);
        };
      })(marker, content, infowindow, winLatLng));
      google.maps.event.trigger(marker, 'click');
    }
  }

}

google.maps.event.addDomListener(window, "resize", initMap);
google.maps.event.addDomListener(window, "load", initMap);

#map-canvas {
  width: 100%;
  height: 1000px;
  border: 1px solid #343a40;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="map-canvas"></div>

以下是标记和信息窗口位置的列表。

var locations = [
  // Array Format: Site Name, Site Info, Marker lat, Marker lng, InfoWindow lat, InfoWindow lng
  ['Site 1', '<div>'+'<h6>Site 1</h6>'+'PR 84.68 <br />'+'kWh 1618'+'</div>', 23.141162, 120.120495, 23.141162, 120.120495],
  ['Site 2', '<div>'+'<h6>Site 2</h6>'+'PR 84.68 <br />'+'kWh 1618'+'</div>', 22.711022, 120.541029, 22.711022, 120.541029],
  ['Site 3', '<div>'+'<h6>Site 3</h6>'+'PR 84.68 <br />'+'kWh 1618'+'</div>', 23.317840, 120.267284, 23.317840, 120.267284],
  ['Site 4', '<div>'+'<h6>Site 4</h6>'+'PR 84.68 <br />'+'kWh 1618'+'</div>', 22.71637, 120.54331, 24.71637, 120.54331],
];

这似乎是一个幼稚的解决方案......是否有任何可用的属性（例如 Bootstrap data-placement）可以设置 InfoWindow 在顶部、底部、左侧或右侧的位置的标志？可能我理解错了。

我也试过setPosition，但是infoWindows不能正常显示。

  function setMarkers(map,locations){

      var i

      for (i = 0; i < locations.length; i++)
      {  
        var name =  locations[i][0]
        var lat = locations[i][2]
        var long = locations[i][3]     
        var latInfo = locations[i][4]
        var longInfo =  locations[i][5]      

        var latlngset = new google.maps.LatLng(lat, long);     

        var marker = new google.maps.Marker({  
              title: name,
              position: latlngset,
              winLatLng: winLatLng,
              map: map
            });
            map.setCenter(marker.getPosition())

            var content = locations[i][1];     

        var infowindow = new google.maps.InfoWindow()

      var winLatLng = new google.maps.LatLng(latInfo, longInfo);

      google.maps.event.addListener(marker, 'click', (function(marker,content,infowindow,winLatLng){ 
            return function() {
              infowindow.setContent(content);
              infoWindow.setPosition(winLatLng);
              infowindow.open(map)               
            };
        })(marker,content,infowindow,winLatLng)); 
      google.maps.event.trigger(marker, 'click');
      }
  }

【问题讨论】：

您为什么要打开这么多信息窗口并期望它们不会相互重叠？ Infowindows 相当原始，不适合这种用途。您可以通过多种其他方式呈现信息并避免这种冲突，但如果不了解您想要做什么，就很难提出具体建议。我可以肯定地告诉你的是，如果你正在考虑如何移动信息窗口，那么你就走错了路。如果您可以退后一步，对您正在尝试做的事情进行更一般的描述，我可能会有一些建议。
@MichaelGeary 感谢您的宝贵建议。就我而言，我想通过可视化地图监控所有发电站 (more than 100) 的情况 (e.g. performance ratio, Kilowatt-hour, etc.)。如果可能，所有信息一目了然，无需用户放大/缩小。这就是为什么我要避免信息窗口相互重叠。但是，许多标记显示在同一区域，可能会导致难以看到和误解。
您可以考虑并排视图，左侧是发电站列表，右侧是地图。该列表将是可滚动的，并且当您放大地图以仅显示地图上可见的站点时它会更新。当您滚动列表中的某个项目时，它可以突出显示匹配的标记，单击列表项将放大地图，并可能展开列表项以显示有关该站的更多信息。同样，地图可以有多个标记（但没有信息窗口）；将鼠标悬停在标记上可以滚动列表，单击会打开详细信息。
当然你会根据需要调整那些 UI 想法；例如，在移动设备上通常没有“悬停”交互，因此您只需在地图或列表中点击即可完成所有操作。我还会在地图上使用较小的自定义标记来标记发电站的位置。
另外在个人笔记上，我的第一条评论听起来有点刺耳，现在我再次看到它。我道歉;我真的不是那个意思。我很高兴你没有冒犯。并祝贺你最近毕业！ :-)

标签： javascript css google-maps

【解决方案1】：

有办法做到这一点。要移动信息窗口，请使用setPosition。

在信息窗口中调用 setPosition()，或者使用 InfoWindow.open() 方法将信息窗口附加到新标记。

注意：如果您在没有传递标记的情况下调用 open()，信息窗口将使用施工时指定的位置通过 InfoWindowOptions 对象字面量。

信息窗口的详细信息：InfoWindows

此处为自定义信息窗口示例：Customization

【讨论】：

stackoverflow.com/questions/49386189/…
我找到了一篇关于自定义信息窗口的帖子。我相信这就是您正在寻找的答案。