Come posso ingrandire a livello di codice la mappa in modo che copra tutto il mondo?API di Google Maps V3: mostra tutto il mondo
risposta
function initialize() {
var mapOptions = {
\t center: new google.maps.LatLng(0, 0),
\t zoom: 1,
\t minZoom: 1
};
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var allowedBounds = new google.maps.LatLngBounds(
\t new google.maps.LatLng(85, -180), \t // top left corner of map
\t new google.maps.LatLng(-85, 180) \t // bottom right corner
);
var k = 5.0;
var n = allowedBounds .getNorthEast().lat() - k;
var e = allowedBounds .getNorthEast().lng() - k;
var s = allowedBounds .getSouthWest().lat() + k;
var w = allowedBounds .getSouthWest().lng() + k;
var neNew = new google.maps.LatLng(n, e);
var swNew = new google.maps.LatLng(s, w);
boundsNew = new google.maps.LatLngBounds(swNew, neNew);
map .fitBounds(boundsNew);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width: 500PX;
height: 500px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
// map zoom level should be 1
Quando si crea una nuova istanza di mappa, è possibile specificare il livello di zoom.
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Più basso è il valore di zoom, il più grande della mappa che si vede, quindi un valore di 1 o 2 dovrebbe mostrare l'intero globo (a seconda delle dimensioni della mappa tela). Dopo aver creato la mappa, è possibile chiamare:
map.setZoom(8);
Per modificare il livello di zoom.
Il problema è che la dimensione della tela è relativo alla dimensione della finestra. Quindi sarebbe stato bello poter dire che dovrebbe mostrare tutto dalla coordinata A alla coordinata B. – Nocklas
Inoltre, all'oggetto opzioni manca la proprietà 'center' che, secondo la [documentazione ufficiale] (https : //developers.google.com/maps/documentation/javascript/reference? hl = en # MapOptions), è richiesto. –
La soluzione per questo problema era utilizzare il metodo fitBounds sull'oggetto mappa e specificare i limiti appropriati.
Quali sono i limiti che hai usato? – httpete
Non è garantito di non avere ripete, ma abusando fatto la piastrella di base parte da 256 (zoom 0) e raddoppia ad ogni incremento lì in - te può selezionare il livello di zoom ottimale usando una funzione logaritmo.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: Math.ceil(Math.log2($(window).width())) - 8,
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width: 100%;
height: 500px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
- 1. Indicatore di Google Maps che non mostra API v3
- 2. Mostra La mia posizione su Google Maps API v3
- 3. Google Maps api tessere personalizzate per mondo di videogiochi fittizi
- 4. API di Google Maps v3: Drawing Manager
- 5. GWT + API di Google Maps v3
- 6. Google Maps API v3 problema di Firefox
- 7. jqtouch/google maps api v3 issue
- 8. google maps api v3 senza trascinamento liscio
- 9. google maps v3 API mouseover con poligoni?
- 10. Google Maps API V3 Infobox.js rimosso
- 11. Google Maps API V3 method fitBounds()
- 12. API JavaScript per Google Maps v3
- 13. google maps api v3 senza etichette?
- 14. Google Maps API v3 confine municipale
- 15. google maps api v3 - streetview più vicina
- 16. Google maps api v3 icone predefinite?
- 17. Google maps api v3 DrawingManager nessun lavoro
- 18. Google Maps Api v3, icona Cluster personalizzata
- 19. Mostra determinate finestre di informazioni nell'API di Google Maps V3
- 20. Google Maps Api v3 InfoWindow personalizzata - Errore "google non definito"
- 21. Google Maps v3 OverlayView.getProjection()
- 22. API v3 di Google Maps rimuovi tutte le polilinee
- 23. Google Map API v3 + Google ha disattivato l'uso di API di Google Maps per questa applicazione
- 24. API di Google Maps v3 - Completamento automatico (indirizzo)
- 25. Mappa API v3 di Google Maps non caricata completamente
- 26. Aggiornamento dei livelli API V3 di Google Maps
- 27. API di Google Maps V3: limiti mappa limite
- 28. Strumenti di Google Maps api v3: distorsioni visive?
- 29. Indicazioni distanza in API di Google Maps v3
- 30. Async Google Maps API v3 indefinito non è una funzione
'swt' e' nor' sono variabili inutilizzate. Si prega di pulire il codice prima di incollare su SO. – developerbmw
grazie @developerbmw – Kunal
Ho provato questa soluzione su Android stesso, ma ho ottenuto un'eccezione: "java.lang.IllegalArgumentException: latitudine sud supera la latitudine nord (85.0> -85.0)". Dopo aver cambiato le coordinate, non si è arrestato, ma non mostra ancora il mondo intero. Come mai? Ecco una domanda al riguardo: http://stackoverflow.com/q/42329186/878126 –