在重叠标记蜘蛛网上的InfowDindows

Question

我使用的是Google Maps API V3，带有标记层和重叠标记蜘蛛网。它运行良好，但是我对每个标记附加的Infowdindows有一个问题。当指定一组标记并用键或鼠标打开InfowDOW，相对于标记的真实位置而不是蜘蛛状位置，InfowDindow的位置是定位的。有什么办法可以让InfowDindow跟随蜘蛛侠？

OMS指定：

var oms = new OverlappingMarkerSpiderfier(map, {
  markersWontMove: true,
  markersWontHide: true,
  keepSpiderfied: true,
  legWeight: 1
    });

google.maps.event.addListener(marker, 'click', function(marker, e) {
  return function() {
    var myHTML = e.feature.getProperty('html');
    boxText.innerHTML = '<div class="ib">' + myHTML + '</div>';
    infowindow.setPosition(e.feature.getGeometry().get());
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, -42)
    });
    infowindow.open(map);
  };
}(marker, e));

https：//jsfiddle.net/groxmzej/

Answer 1

在 infowdow

文档

打开（[选项，锚]）
参数：

• 选项：InfowoWindowOpenoptions | Map | StreetViewPanorama 可选的要么是InfowoWindowopenoptions对象（推荐）或MAP | Panorama渲染此InfowWindow。
• 锚：mvcobject 可选将其放置在该infoWindow的锚点。如果锚是非锚，则InfowDindow将位于锚的顶部中心。 Infowdoudow将在与锚的同一地图或全景图上渲染（如果有的话）。
  返回值：无
  在给定的地图上打开此Infowdow。可选地，Infowdow可以与锚点关联。在核心API中，唯一的锚是标记类。但是，锚点可以是任何MVCOBJECT，它可以公开LATLNG位置属性，并且可以选择用于计算PixelOffset的点锚点属性（请参阅InfowWindowOptions）。锚点是从锚位置到Infowdindow尖端的偏移。建议将InfowoWopoPenoptions接口用作此方法的单个参数。为防止更改浏览器的关注点，请将InfowoWopoPenoptions.shouldfocus设置为false。

因此，更改您的代码，该代码从：

infowindow.setPosition(e.feature.getGeometry().get());
infowindow.setOptions({
  pixelOffset: new google.maps.Size(0, -42)
});
infowindow.open(map);

<

infowindow.open(map, marker);

a

a href = “ https：//jsfiddle.net/geocodezip/geocodezip/nv0lc9x6/1/” =“ https://i.sstatic.net/5lthn.png” rel =“ nofollow noreferrer”>

代码段：

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "name": "Arthur George Melhuish",
        "html": "<h2>Arthur George Melhuish</h2>Born 12 Jan 1909 in 2 Fore St, Tiverton<br><span class=addedby>Added by Admin</span>"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-3.48882160, 50.90258030]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "Harold Edward Melhuish",
        "html": "<h2>Harold Edward Melhuish</h2>Born 30 Jun 1903 in 2 Fore Street, Tiverton<br><span class=addedby>Added by Admin</span>"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-3.48882160, 50.90258030]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "name": "John Norman Melhuish",
        "html": "<h2>John Norman Melhuish</h2>Born 3 Jan 1905 in 2 Fore Street, Tiverton<br><span class=addedby>Added by Admin</span>"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-3.48882160, 50.90258030]
      }
    },

  ]
};
var map = null;
var bounds = new google.maps.LatLngBounds();

var boxText = document.createElement("div");

var infowindow = new google.maps.InfoWindow({
  content: boxText,
  disableAutoPan: false,
  zIndex: null,
  alignBottom: true,
  enableEventPropagation: false,
  boxStyle: {
    padding: "6px",
    border: "1px solid #666",
    background: "#fff",
    width: "240px"
  }
});



function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51, -3.5),
    zoom: 9
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  google.maps.event.addListenerOnce(map, 'idle', function() {
    var oms = new OverlappingMarkerSpiderfier(map, {
      markersWontMove: true,
      markersWontHide: true,
      keepSpiderfied: true,
      legWeight: 1
    });

    oms.addListener('spiderfy', function(spidered, unspidered) {
      for (var i = 0; i < spidered.length; i++) {
        spidered[i].setLabel("");
        spidered[i].setOptions({
          zIndex: i
        });
      }
    });
    oms.addListener('unspiderfy', function(spidered, unspidered) {
      for (var i = 0; i < spidered.length; i++) {
        spidered[i].setLabel("" + (i + 1));
        spidered[i].setOptions({
          zIndex: i
        });
      }
    });

    google.maps.event.addListener(map.data, 'addfeature', function(e) {
      if (e.feature.getGeometry().getType() === 'Point') {
        var marker = new google.maps.Marker({
          position: e.feature.getGeometry().get(),
          /*title: e.feature.getProperty('name'),*/
          map: map
        });

        google.maps.event.addListener(marker, 'mouseover', function(marker, e) {
          return function() {
            var myHTML = e.feature.getProperty('html');
            boxText.innerHTML = '<div class="ib">' + myHTML + '</div>';
            infowindow.open(map, marker);
          };
        }(marker, e));

        google.maps.event.addListener(marker, 'click', function(marker, e) {
          return function() {
            var myHTML = e.feature.getProperty('html');
            boxText.innerHTML = '<div class="ib">' + myHTML + '</div>';
            infowindow.open(map, marker);
          };
        }(marker, e));


        oms.addMarker(marker);
        google.maps.event.addListener(map, 'idle', function() {
          var markersNear = oms.markersNearMarker(marker, false);
          if (markersNear.length > 0) {
            marker.setLabel("" + (markersNear.length + 1));
          }
          marker.setOptions({
            zIndex: markersNear.length
          });
        });
      }
    });
    layer = map.data.addGeoJson(geoJson);
    map.data.setMap(null);
    google.maps.event.addListener(map, "click", function() {
      infowindow.close();
    });
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

#map_canvas {
  position: relative;
  width: 100%;
  height: calc(95vh)
}

.ib {
  line-height: 18px
}

.ib h2 {
  margin: 0;
  line-height: 28px
}

.addedby {
  float: right;
  color: #999;
  margin-top: 1em
}

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8" />

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

  <script src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>

</head>

<body>

  <div id="map_canvas"></div>

</body>

</html>