Google Maps API V3 Fitbounds () zooms mais jamais dans

J'ai rencontré ce problème général aujourd'hui, pensais que je partagerais une solution. Je me rends compte que cela est légèrement différent de votre problème de «localisateur de magasin», mais cela s'applique à bien des égards. Dans mon cas, j'ai une collection de marqueurs sur la carte et en ajoutant une, et souhaitez vous assurer que tous les marqueurs sont maintenant en vue. Ce code vérifie chaque marqueur existant pour voir si c'est à la vue et sur le chemin, crée une nouvelle boîte de sélection qui les contiendrait tous, si nécessaire. À la fin, le cas échéant, si vous n'avez pas été vu, la vue est réinitialisée afin qu'elles soient toutes.

(Ceci utilise le module de tableau de Dojo, simplement une enveloppe de commodité autour de l'itération de la matrice de base) p>

var origBounds = map.getBounds(),
    newBounds = new google.maps.LatLngBounds(null),
    anyFailed = false;
array.forEach(markers, function (m) {
    newBounds.extend(m.position);
    if (!origBounds.contains(m.position)) {
        anyFailed = true;
    }
});
if (anyFailed) {
    map.setCenter(newBounds.getCenter());
    map.fitBounds(newBounds);
}

Qu'est-ce qui m'a aidé à utiliser 0 rembourrage comme deuxième paramètre sur Fixturations (limites, rembourrage), voici l'exemple de code complet:

function initMap() {
    var mapOptions = {
        center: new google.maps.LatLng(0, 0),
        zoom: 1,
        minZoom: 1
    };
    map = new google.maps.Map(document.getElementById('officeMap'), mapOptions);
    google.maps.event.addListenerOnce(map, 'idle', function() {
        //Map is ready
        worldViewFit(map);
    });
}
function worldViewFit(mapObj) {
    var worldBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(70.4043,-143.5291),  //Top-left
        new google.maps.LatLng(-46.11251, 163.4288)  //Bottom-right
    );
    mapObj.fitBounds(worldBounds, 0);
    var actualBounds = mapObj.getBounds();
    if(actualBounds.getSouthWest().lng() == -180 && actualBounds.getNorthEast().lng() == 180) {
        mapObj.setZoom(mapObj.getZoom()+1);
    }
}

Assurez-vous qu'il n'y a pas d'animations CSS sur la largeur ou la hauteur de votre carte. Les animations interfèrent avec le comportement de zoom de Fitbound ()

J'ai passé la majeure partie de la journée sur ce problème hier, et j'ai rencontré cet article sur StackoverFlow au moins une douzaine de fois. Mais je devais finalement trouver le problème le problème difficile. p>

Suppression de la transition : toutes les 0,5% facilité; Code> La ligne ci-dessous résolue pour moi. P>

.google-map {
  width: 100%;
  height: 0px;
  transition: all 0.5s ease;
}

.google-map.loaded {
    height: 400px;
}

Vérifiez cette citation de la documentation GMAP sur marqueur.setmap (null); code> (utilisé pour supprimer les marqueurs d'une carte):

Notez que la méthode ci-dessus ne supprime pas fort> le marqueur. Il supprime le marqueur de la carte. Si au lieu de cela, vous souhaitez supprimer le marqueur, vous devrait l'enlever de la carte, puis réglez le marqueur lui-même sur NULL. P> BlockQuote>

Mon problème était que lorsque je retiens les marqueurs de la carte, ils étaient toujours stockés dans Map.Markers Code>. Donc lors de la réglage limites code>, il saisit tous les marqueurs précédents également: P> xxx pré>

console.logging limites code> a montré que les limites seraient Toujours accueillir toutes les limites antérieures à cause de cela. P>

Ma solution consistait à garder une trace des marqueurs dans un marqueurs code> tableau / objet qui stocke une clé unique pour chaque marqueur (dans mon Cas lié à un champ de saisie de Places Autocomplete) et retirez un marqueur de celui-ci lors de la suppression du marqueur d'une carte. De cette façon, je peux exécuter un chèque lors de la génération de limites code> pour voir si le marqueur actuel dans map.markers code> est dans le (Mise à jour) marqueurs Code> Array. P>

map.markers.forEach( (marker) => {
  // check if map marker is in this.markers (to make sure only current)
  for (const [key, value] of Object.entries(markers)) {
    if (marker == value) {
      var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng())
      bounds.extend(latlng)
    }
  }
})