Anzeige der Weltkarte ohne Wiederholungen

Ich verwende derzeit das Google Maps-API zum ersten Mal. Im Wesentlichen möchte ich die Karte herausgezoomt haben, so dass die ganze Welt ohne Überlappung angezeigt wird (z. B. Bits eines bestimmten Landes werden nicht auf beiden Seiten der Karte wiederholt).Anzeige der Weltkarte ohne Wiederholungen

Der nächstgelegene ich auf meine Anforderungen gefunden haben, ist diese Frage SO: Google Maps API V3: Show the whole world

jedoch die obere Antwort auf diese Frage liefern nicht den vollständigen Code erforderlich.

<!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>

jedoch in dem in der Frage über eine Reihe von zusätzlichen Variablen angegeben wurde bereitgestellt Beispiel:

Ich habe den Starter Beispiel von Google als Basis für meine HTML verwendet. Meine Frage ist, wo schließe ich den Code von der Frage oben an, um sicherzustellen, dass meine Weltkarte korrekt angezeigt wird?

Quelle

2013-12-10 jezzipin

Wenn Sie keine Wiederholungen wünschen, müssen Sie den zulässigen Mindestzoom und die Breite Ihrer Karte auf mindestens der Breite der Basiskacheln mit der auf Ihrer Karte zulässigen Mindestzoomstufe beschränken . Bei Zoom Null ist eine Breite der Welt eine einzelne 256 x 256 Pixel Kachel, jede Zoomstufe erhöht sich um den Faktor 2.

Dies zeigt eine Breite der Karte auf Zoomstufe 1 (512x512 map- Leinwand), können Sie die Höhe ändern, aber die Breite müssen 256 bei Zoom 0, 512 bei Zoom 1, 1024 bei Zoom 2, usw. sein:

<!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>

Code-Schnipsel:

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>

Quelle

2013-12-10 17:05:24 geocodezip

Das ist toll, aber es am unteren Rand der Karte, unabhängig von der Höhe ein graues Feld erzeugt. Gibt es eine Möglichkeit, diese graue Box loszuwerden, die schrecklich aussieht? – jezzipin

Sie können die Höhe ändern, um kürzer als ein Vielfaches von 256 zu sein, die vertikale Richtung wird nicht wiederholt. – geocodezip

@jezzipin: Sie könnten "minZoom" auch auf 2 oder eine höhere Stufe einstellen, abhängig von den Geräten, auf denen Sie Ihre Karte anzeigen möchten. Weite Bildschirme zeigen diese grauen Felder oben und unten, wenn der minimale Zoomfaktor zu niedrig ist. –

-2

Dies ist die JavaScript ich gefunden:

/** 
* 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() 

});

Quelle

2017-07-10 14:46:25 Pixel

Anzeige der Weltkarte ohne Wiederholungen

Antwort

Verwandte Themen