javascript - 如何避免 InfoWindow 在 Google map 上重叠

Question

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

---

可运行代码段:

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],
];

It seems like a naive solution... Is there any available attribute (e.g. Bootstrap data-placement) that can set the position of the InfoWindow on top, bottom, left or the right side of the mark? Perhaps I misunderstood.

我也试过 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');
      }
  }

Answer 1

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

Call setPosition() on the info window, or Attach the info window to a new marker using the InfoWindow.open() method.

Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.

此处信息窗口的详细信息:InfoWindows

此处的自定义信息窗口示例:Customization