Visualizza la mappa del mondo senza ripetizioni

Attualmente sto utilizzando l'API di Google Maps per la prima volta. In sostanza, desidero che la mappa venga ingrandita in modo che il mondo intero venga visualizzato senza alcuna sovrapposizione (ad esempio, i bit di un determinato paese non vengono ripetuti su entrambi i lati della mappa).Visualizza la mappa del mondo senza ripetizioni

Il più vicino che ho trovato per le mie esigenze è così domanda: Google Maps API V3: Show the whole world

Tuttavia, la risposta in alto su questa questione non fornisce il codice completo necessario.

ho usato l'esempio di avviamento da parte di Google come base per il mio HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 100% } 
    </style> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuP_BOi6lD7L6ZY7JTXRdhY1YEj_gcEP0&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
      var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 1 
      }; 
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"/> 
    </body> 
</html>

Tuttavia, l'esempio fornito nella domanda di cui sopra un certo numero di ulteriori variabili sono stati specificati. La mia domanda è: dove inserisco il codice dalla domanda qui sopra per assicurarmi che la mia mappa del mondo sia visualizzata correttamente?

fonte

2013-12-10 jezzipin

Se non si desidera alcuna ripetizione, è necessario controllare lo zoom minimo consentito e la larghezza della mappa deve essere inferiore o uguale a una larghezza delle tessere di base al livello di zoom minimo consentito sulla mappa . Allo zoom zero, una larghezza del mondo è una singola tessera da 256 x 256 pixel, ciascun livello di zoom aumenta di un fattore 2.

Questo mostrerà una larghezza della mappa a livello di zoom 1 (512x512 mappa- tela), è possibile modificare l'altezza, ma la larghezza dovrà essere 256 a zoom 0, 512 a zoom 1, 1024 a zoom 2, ecc:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 512px; width:512px;} 
    </style> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
      var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 1, 
      minZoom: 1 
      }; 
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"/> 
    </body> 
</html>

frammento di codice:

function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(-34.397, 150.644), 
 
    zoom: 1, 
 
    minZoom: 1 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html { 
 
    height: 100% 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
#map-canvas { 
 
    height: 512px; 
 
    width: 512px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

fonte

2013-12-10 17:05:24 geocodezip

Questo è ottima, tuttavia produce una scatola grigia nella parte inferiore della mappa indipendentemente dall'altezza. C'è un modo per sbarazzarsi di questa scatola grigia che sembra orribile. – jezzipin

È possibile modificare l'altezza per essere più breve di un multiplo di 256, la direzione verticale non si ripete. – geocodezip

@jezzipin: puoi anche impostare 'minZoom' su 2 o un altro livello superiore, a seconda dei dispositivi su cui vuoi mostrare la mappa. Gli schermi ampi mostreranno effettivamente quelle caselle grigie in alto e in basso se il fattore di zoom minimo è troppo basso. –

-2

Questo è il JavaScript che ho trovato:

/** 
* All locations map scripts 
*/ 
jQuery(function($){ 

    $(document).ready(function(){ 
     loadmap(); 
    }); 

    function loadmap() 
    { 
     var locations = wpsl_locator_all.locations; 
     var mapstyles = wpsl_locator.mapstyles; 
     var mappin = (wpsl_locator.mappin) ? wpsl_locator.mappin : ''; 
     var bounds = new google.maps.LatLngBounds(); 

     var mapOptions = { 
       mapTypeId: 'roadmap', 
       mapTypeControl: false, 
       zoom: 8, 
       styles: mapstyles, 
       panControl : false 
      } 
     if (wpsl_locator.custom_map_options === '1') mapOptions = wpsl_locator.map_options; 

     var infoWindow = new google.maps.InfoWindow(), marker, i; 
     var map = new google.maps.Map(document.getElementById('alllocationsmap'), mapOptions); 

     // Loop through array of markers & place each one on the map 
     for(i = 0; i < locations.length; i++) { 
      var position = new google.maps.LatLng(locations[i].latitude, locations[i].longitude); 
      bounds.extend(position); 

      var marker = new google.maps.Marker({ 
       position: position, 
       map: map, 
       title: locations[i].title, 
       icon: mappin 
      }); 

      // Info window for each marker 
      google.maps.event.addListener(marker, 'click', (function(marker, i){ 
       return function() { 
        infoWindow.setContent(locations[i].infowindow); 
        infoWindow.open(map, marker); 
        wpsl_all_locations_marker_clicked(marker, infoWindow) 
       } 
      })(marker, i)); 

      // Center the Map 
      map.fitBounds(bounds); 
      var listener = google.maps.event.addListener(map, "idle", function() { 
        if (locations.length < 2) { 
        map.setZoom(13); 
       } 
       google.maps.event.removeListener(listener); 
      }); 
     } 

     // Fit the map bounds to all the pins 
     var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { 
      google.maps.event.removeListener(boundsListener); 
     }); 

     wpsl_all_locations_rendered(map); 

    } // loadmap() 

});

fonte

2017-07-10 14:46:25 Pixel

Visualizza la mappa del mondo senza ripetizioni

risposta

Problemi correlati