Encaixe fitBounds da API do Google Maps 3 - garanta que os marcadores não sejam obscurecidos por controles sobrepostos

Question

Apr 26, 2012, 08:34 PM

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

Encaixe fitBounds da API do Google Maps 3 - garanta que os marcadores não sejam obscurecidos por controles sobrepostos

Gostaria de poder adicionar preenchimento a uma vista de mapa depois de chamar ummap.fitBounds(), portanto, todos os marcadores podem ser visíveis, independentemente dos controles do mapa ou de itens como painéis deslizantes que cubram os marcadores quando abertos. Leaftlet tem umopção para adicionar preenchimento a fitBounds, mas o Google Maps não.

Às vezes, os marcadores northmost escondem-se parcialmente acima da viewport. Os marcadores mais a oeste também costumam estar sob o controle deslizante de zoom. Com a API 2, foi possível formar uma viewport virtual, reduzindo os paddings fornecidos na janela de visualização do mapa e, em seguida, chamando o métodoshowBounds() para calcular e executar zoom e centralização com base nessa viewport virtual:

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

Um exemplo prático disso para a API 2 pode ser encontradoAqui sob o link de exemplo showBounds ().

Não consigo encontrar funcionalidade semelhante na API V3, mas espero que haja outra maneira de isso ser realizado. Talvez eu pudesse pegar os pontos nordeste e sudoeste, então adicionar coordenadas falsas para estender os limites depois de incluí-los?

ATUALIZAR

(Codepen caso o código abaixo não funcione)

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

O problema é este:

Eu tentei adicionar um controle como documentado emControles personalizados, mas o mapa não está exatamente ciente disso - vejaeste violino bifurcada doExemplo de controle personalizado de mapas. Um dos marcadores ainda está obscurecido pelo controle.