Google Maps - Zoom per adattarsi ai marcatori non funziona quando la mappa non è visibile
-
23-09-2019 - |
Domanda
Sto usando l'API V2 di Google Maps. Aggiungo marcatori alla mappa e poi ingrandisco quei marcatori. Funziona bene se la mappa è visibile, lo faccio. Ma in caso contrario - ad esempio, se ho una tabstry e la scheda della mappa non viene selezionata quando la pagina si carica - quindi quando mostro la mappa, il livello di zoom e il centro sono sbagliati.
Ecco un semplice caso di test (utilizza jQuery):
<script type="text/javascript">
var scale = Math.random() * 20;
$(document).ready(function() {
var $container = $('#container');
// $container.hide();
var map = new GMap2($('#map')[0]);
$container.show();
var markerBounds = new GLatLngBounds();
for (var i = 0; i < 10; i++) {
var randomPoint = new GLatLng(38.935394 + (Math.random() - 0.5) * scale, -77.061382 + (Math.random() - 0.5) * scale);
map.addOverlay(new GMarker(randomPoint));
markerBounds.extend(randomPoint);
}
map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));
});
</script>
<div id="container">
<div id="map" style="margin: 100px; width: 450px; height: 300px;"></div>
</div>
Funziona bene così com'è, ma se sei un disaccordo $container.hide()
È tutto colpito.
C'è un modo per far funzionare correttamente l'API di Google Maps su un div che non è visibile?
Soluzione
Tutto quello che dovresti fare è creare il GMaps2()
prima di ogni altra cosa. Puoi allora hide()
il contenitore, aggiungi i punti, ottieni il getBoundsZoomLevel()
, show()
Di nuovo, e dovrebbe funzionare bene.
Prova quanto segue:
$(document).ready(function() {
var $container = $('#container');
// First create the Map.
var map = new GMap2($('#map')[0]);
// The container can be hidden immediately afterwards.
$container.hide();
// Now you can do whatever you like!
var markerBounds = new GLatLngBounds();
for (var i = 0; i < 10; i++) {
var randomPoint = new GLatLng( 38.935394 + (Math.random() - 0.5) * scale,
-77.061382 + (Math.random() - 0.5) * scale);
map.addOverlay(new GMarker(randomPoint));
markerBounds.extend(randomPoint);
}
map.setCenter(markerBounds.getCenter(), map.getBoundsZoomLevel(markerBounds));
// Finally unhide the container.
$container.show();
});
Altri suggerimenti
Ecco cosa ho finito per fare, per quello che vale.
$(".TabPanel").watch("display,visibility", function() {
$(".MapContainer", this).each(function() {
if ($(this).is(":visible") == true) {
$(this).zoomToFitMarkers();
};
});
});
Questo usa Il plug -in di monitoraggio di Rick Strahl per jQuery Per guardare il pannello delle schede per le modifiche alla visibilità, quindi riapplica la logica di zoom.
Per completezza ecco il mio zoomToFitMarkers
estensione:
$.fn.zoomToFitMarkers = function() {
var map = this[0];
map.gmap.checkResize();
map.bounds = new GLatLngBounds();
if (!!map.gmap.getOverlays) {
for (i = 0; i < map.gmap.getOverlays.length; i++) {
map.bounds.extend(map.gmap.getOverlays[i].getLatLng());
}
if (map.bounds && !map.bounds.isEmpty()) {
var zoomLevel = map.gmap.getBoundsZoomLevel(map.bounds);
zoomLevel = zoomLevel > 9 ? 9 : zoomLevel;
zoomLevel = zoomLevel < 2 ? 2 : zoomLevel;
map.gmap.setCenter(map.bounds.getCenter(), zoomLevel);
}
}
map.gmap.checkResize();
};
Questo si basa su un paio di convenzioni:
L'oggetto GMAP2 è memorizzato in
map.gmap
, dovemap
è l'elemento DOM target:var map= $("div#MapTarget")[0]; map.gmap = new google.maps.Map2(map);
Ogni volta che un marcatore viene aggiunto alla mappa, viene archiviato in un array per un uso futuro:
var marker = new GMarker(point); map.gmap.addOverlay(marker); // Keep track of new marker in getOverlays array if (!map.gmap.getOverlays) map.gmap.getOverlays = new Array(); map.gmap.getOverlays.push(marker);