Google Maps API 3 fitBounds-Auffüllung - Stellen Sie sicher, dass Markierungen nicht durch überlagerte Steuerelemente verdeckt werden

Question

Apr 26, 2012, 08:34 PM

google-maps padding geo google-maps-api-2 google-maps-api-3

Google Maps API 3 fitBounds-Auffüllung - Stellen Sie sicher, dass Markierungen nicht durch überlagerte Steuerelemente verdeckt werden

Ich möchte einer Kartenansicht nach dem Aufrufen von a Auffüllen hinzufügen könnenmap.fitBounds(), so dass alle Markierungen unabhängig von Kartensteuerelementen oder Elementen wie Schiebereglern sichtbar sind, die Markierungen beim Öffnen verdecken würden. Leaftlet hat eineOption zum Hinzufügen von Auffüllungen zu fitBoundsGoogle Maps jedoch nicht.

Manchmal verstecken sich die nördlichsten Markierungen teilweise über dem Ansichtsfenster. Die westlichsten Markierungen liegen häufig auch unter dem Zoomregler. Mit API 2 war es möglich, ein virtuelles Ansichtsfenster zu erstellen, indem die angegebenen Abstände aus dem Kartenansichtsfenster reduziert und dann die Methode aufgerufen wurdenshowBounds() So berechnen Sie Zoomen und Zentrieren anhand dieses virtuellen Ansichtsfensters:

<code>map.showBounds(bounds, {top:30,right:10,left:50});
</code>

Ein funktionierendes Beispiel für API 2 finden Sie hierHier unter dem showBounds () Beispiel Link.

Ich kann ähnliche Funktionen in API V3 nicht finden, aber es gibt hoffentlich einen anderen Weg, wie dies erreicht werden kann. Vielleicht könnte ich die Nordost- und Südwestpunkte erfassen und dann falsche Koordinaten hinzufügen, um die Grenzen weiter zu erweitern, nachdem ich sie eingeschlossen habe?

AKTUALISIEREN

(Codepen falls der Code unten nicht funktioniert)

<code>function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    draggable: true,
    streetViewControl: false,
    zoomControl: false
  });

  var marker1 = new google.maps.Marker({
    position: {lat: 37, lng: -121},
    map: map,
  });

  var marker2 = new google.maps.Marker({
    position: {lat: 39.3, lng: -122},
    map: map,
  });
 
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(marker1.position);
  bounds.extend(marker2.position);
  map.fitBounds(bounds);
}</code>

<code>#map {
  height: 640px;
  width: 360px;
}
#overlays {
  position: absolute;
  height: 50px;
  width: 340px;
  background: white;
  margin: -80px 10px;
  text-align: center;
  line-height: 50px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}</code>

<code><html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>

  </head>
  <body>
    <div id="map"></div>
    <div id="overlays">Controls / Order pizza / ETA / etc.</div>
  
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
    </script>
  </body>
</html></code>

Das Problem ist folgendes:

Ich habe versucht, ein Steuerelement hinzuzufügen, wie unter dokumentiertBenutzerdefinierte Steuerelemente, aber die Karte weiß es nicht genau - siehediese Geige aus dem gegabeltBeispiel für ein benutzerdefiniertes Steuerelement für Maps. Einer der Marker wird von der Steuerung immer noch verdeckt.