Defina dinamicamente o nível de zoom com base em uma caixa delimitadora

12

Eu tenho um mapa de folheto cujo tamanho depende do tamanho da janela do navegador. Gostaria que o nível de zoom fosse escolhido dinamicamente, para que ele seja o mais ampliado possível, enquanto mostra a totalidade da caixa delimitadora.

No momento, tenho apenas o nível de zoom codificado e o ponto central com base em uma média de pontos.

map = new L.Map('map', {
  center: new L.LatLng(
    latitudeSum/locations.length,
    longitudeSum/locations.length
  )
  zoom: 9
})

Em vez disso, gostaria de fornecer uma caixa delimitadora (duas ilhas) e escolher o nível de zoom com base no tamanho da janela.

leaflet

— Mike McKay
fonte

25

Você pode simplesmente usar:

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());

— Farhat Abbas
fonte

1

Resposta útil - essa é a melhor maneira de centralizar e aplicar zoom - antes que eu estivesse apenas centralizando com um cálculo manual. FitBounds foi a resposta que eu precisava, mas descobri que você poderia simplesmente passar em duas coordenadas para caber e terminar.

— precisa

2

Definitivamente, use a próxima resposta, a menos que você já tenha marcadores criados.

— 21716 Andy

11

Usando a resposta de @ Farhat , descobri que tudo que eu precisava era passar uma matriz de matrizes:

map.fitBounds([
  [-4.8587000, 39.8772333],
  [-6.4917667, 39.0945000]
])

— Mike McKay
fonte

1

Obviamente, está faltando um colchete direito perto do final. Não sei por que você reverteu minha edição.

— Jan Kyu Peblik

1

Você está certo sobre o suporte - obrigado. Eu vou consertar isso. Sua edição também teve uma vírgula extra.

— Mike McKay

4

developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/… Código também testado com vírgula à direita. (Porque a vida é muito curta para se preocupar com linhas que inutilmente diferem significativamente no formato.)

— Jan Kyu Peblik

0

map.fitBounds() também funciona muito bem se você estiver trabalhando com as polilinhas do Google Map:

<!-- required for Leaflet Polyline support -->
<script type="text/javascript" src="https://cdn.rawgit.com/jieter/Leaflet.encoded/68e78190/Polyline.encoded.js"
crossorigin=""></script>

// polylines require backslashes to be escaped (Jinja example)
let encodedRoute = '{{ activity.strava_data['map']['polyline']|replace("\\", "\\\\")|safe }}';
let coordinates = L.Polyline.fromEncoded(encodedRoute).getLatLngs();
let map = L.map('map').fitBounds(coordinates);

— naamã
fonte

Por que essa resposta foi rejeitada?

— LeeGee

0

Foi assim que eu fiz isso graças a @Mike McKay! ;)

Observe que adicionei alguns extras às cordas como preenchimento interno, para que os marcadores não fiquem bem ao lado do mapa. Desta forma, parece mais bonito.


const [ ...coordinates ] = locations.map(marker => [ marker.coordinates.latitude + 
0.055, marker.coordinates.longitude + 0.055 ])

map.fitBounds([ ...coordinates ])

VUE.JS WAY:

mounted () {
   this.$nextTick(() => {
        this.initialZoom()
   })
}


methods: {
   initialZoom () {
       const map = this.$refs.myMap.mapObject
       const [ ...coordinates ] = this.locations.map(marker => [                                  
                                          marker.coordinates.latitude + 0.055,
                                          marker.coordinates.longitude + 0.055 
                                   ]) 

map.fitBounds([ ...coordinates ])

— Despertaweb
fonte