Google Maps API 3 fitBounds dopełnienie - upewnij się, że znaczniki nie są zasłonięte przez nałożone kontrolki

Question

Apr 26, 2012, 08:34 PM

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

Google Maps API 3 fitBounds dopełnienie - upewnij się, że znaczniki nie są zasłonięte przez nałożone kontrolki

Chciałbym móc dodać dopełnienie do widoku mapy po wywołaniumap.fitBounds(), więc wszystkie znaczniki mogą być widoczne bez względu na elementy sterujące mapy lub takie rzeczy jak przesuwne panele, które przykrywają znaczniki po otwarciu. Leaftlet maopcja dodania dopełnienia do fitBoundów, ale Google Maps nie.

Czasami północne znaczniki częściowo ukrywają się nad rzutnią. Znaczniki na zachód również często leżą pod suwakiem powiększenia. Z API 2 możliwe było utworzenie wirtualnej rzutni poprzez zmniejszenie podanych odstępów z rzutni mapy, a następnie wywołanie metodyshowBounds() do obliczania i wykonywania powiększania i centrowania na podstawie wirtualnej rzutni:

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

Można znaleźć działający przykład tego dla API 2tutaj pod linkiem przykładowym showBounds ().

Nie mogę znaleźć podobnej funkcjonalności w API V3, ale mam nadzieję, że można to osiągnąć w inny sposób. Może udałoby mi się zdobyć punkty na północnym i południowym wschodzie, a następnie dodać fałszywe współrzędne, aby jeszcze bardziej rozszerzyć granice po ich uwzględnieniu?

AKTUALIZACJA

(Codepen w przypadku, gdy poniższy kod nie działa)

<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>

Problem polega na tym:

Próbowałem dodać formant zgodnie z dokumentacjąNiestandardowe kontrolki, ale mapa nie jest dokładnie tego świadoma - patrzto skrzypce rozwidlony odMapuje niestandardowy przykład sterowania. Jeden ze znaczników jest nadal zasłonięty przez kontrolkę.