it-swarm.com.de

Google Maps v3 - Begrenzung des sichtbaren Bereichs und der Zoomstufe

kann man Google map v3 auf ein bestimmtes Gebiet beschränken? Ich möchte, dass nur ein bestimmter Bereich (z. B. ein Land) angezeigt wird, und der Benutzer darf nicht an einer anderen Stelle gleiten. Ich möchte auch die Zoomstufe einschränken - z. nur zwischen den Stufen 6 und 9. Und ich möchte alle Basiskartentypen verwenden.

Gibt es eine Möglichkeit, dies zu erreichen? 

Ich hatte teilweise mit der Begrenzung der Zoomstufe mit StyledMap Erfolg, aber es gelang mir nur mit der Einschränkung von ROADMAP. Ich konnte den Zoom auf andere Basistypen auf diese Weise nicht beschränken.

Danke für jede Hilfe

91
Tomik

Sie können das Ereignis dragendabhören, und wenn die Karte außerhalb der zulässigen Grenzen gezogen wird, verschieben Sie sie wieder hinein. Sie können Ihre zulässigen Grenzen in einem LatLngBoundsNAME _ -Objekt definieren und dann mit der Methode contains() prüfen, ob das neue Lat/Ling-Zentrum innerhalb der Grenzen liegt.

Sie können die Zoomstufe auch sehr einfach begrenzen.

Betrachten Sie das folgende Beispiel: Fiddle Demo

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Limit Panning and Zoom</title> 
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   // This is the minimum zoom level that we'll allow
   var minZoomLevel = 5;

   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   // Bounds for North America
   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(28.70, -127.50), 
     new google.maps.LatLng(48.85, -55.90)
   );

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
   });

   </script> 
</body> 
</html>

Screenshot aus dem obigen Beispiel. In diesem Fall kann der Benutzer weder weiter nach Süden noch weiter nach Osten ziehen:

Google Maps JavaScript API v3 Example: Force stop map dragging

118
Daniel Vassallo

Eine bessere Möglichkeit, die Zoomstufe einzuschränken, wäre die Verwendung der Optionen minZoom/maxZoom, anstatt auf Ereignisse zu reagieren.

var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);

Oder die Optionen können während der Karteninitialisierung angegeben werden, z.

var map = new google.maps.Map(document.getElementById('map-canvas'), opt);

Siehe: Google Maps - Referenz zu JavaScript API V3

174
ChrisV

Um den Zoom auf v.3 + . In Ihrer Karteneinstellung zu begrenzen, fügen Sie die Standard-Zoomstufe und minZoom oder maxZoom (oder beide, falls erforderlich) hinzu wenn eine Begrenzung erforderlich ist. alle sind case sensitive!

function initialize() {
   var mapOptions = {
      maxZoom:17,
      minZoom:15,
      zoom:15,
      ....
6
DEEP-SILVER

Besserer Weg, um den Bereich zu begrenzen ... verwendet die Logik von oben.

var dragStartCenter;

google.maps.event.addListener(map, 'dragstart', function(){
                                       dragStartCenter = map.getCenter();
                                         });

google.maps.event.addListener(this.googleMap, 'dragend', function(){
                            if (mapBounds.contains(map.getCenter())) return;
                    map.setCenter(this.dragStart);
                           });
3
Pat

Gute Nachrichten. Ab der Version 3.35 von Maps JavaScript API, die am 14. Februar 2019 gestartet wurde, können Sie die neue Option restriction verwenden, um den Ansichtsbereich der Karte zu beschränken. 

Nach der Dokumentation

MapRestriction-Schnittstelle

Eine Einschränkung, die auf die Karte angewendet werden kann. Das Ansichtsfenster der Karte überschreitet diese Einschränkungen nicht.

source: https://developers.google.com/maps/documentation/javascript/reference/3.35/map#MapRestriction

Nun fügen Sie also während einer Karteninitialisierung nur noch eine Einschränkungsoption hinzu. Schauen Sie sich das folgende Beispiel an, das Viewport auf die Schweiz beschränkt

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 46.818188, lng: 8.227512},
    minZoom: 7,
    maxZoom: 14,
    zoom: 7,
    restriction: {
      latLngBounds: {
        east: 10.49234,
        north: 47.808455,
        south: 45.81792,
        west: 5.95608
      },
      strictBounds: true
    },
  });
}
#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" async defer></script>

Ich hoffe das hilft!

2
xomena
myOptions = {
        center: myLatlng,
        minZoom: 6,
        maxZoom: 9,
        styles: customStyles,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
2
Anup

Dies kann verwendet werden, um die Karte auf einen bestimmten Ort zu zentrieren. Was ich brauchte.

    var MapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(35.676263, 13.949096),
    new google.maps.LatLng(36.204391, 14.89038));

    google.maps.event.addListener(GoogleMap, 'dragend', function ()
    {
        if (MapBounds.contains(GoogleMap.getCenter()))
        {
            return;
        }
        else
        {
            GoogleMap.setCenter(new google.maps.LatLng(35.920242, 14.428825));
        }
    });
1

Eine Lösung ist wie, wenn Sie die spezifische Lat/Lng kennen.

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(new google.maps.LatLng(latitude, longitude));
    map.setZoom(8);

});

Wenn Sie kein spezifisches Lat/Lng haben

google.maps.event.addListener(map, 'idle', function() {

    map.setCenter(map.getCenter());
    map.setZoom(8);

});

oder

google.maps.event.addListener(map, 'idle', function() {

    var bounds = new google.maps.LatLngBounds();
    map.setCenter(bounds.getCenter());
    map.setZoom(8);

});
0
Jaison

Aus irgendeinem Grund

if (strictBounds.contains(map.getCenter())) return;

funktionierte nicht für mich (vielleicht eine südliche Hemisphäre). Ich musste es ändern in:

    function checkBounds() {
        var c = map.getCenter(),
            x = c.lng(),
            y = c.lat(),
            maxX = strictBounds.getNorthEast().lng(),
            maxY = strictBounds.getNorthEast().lat(),
            minX = strictBounds.getSouthWest().lng(),
            minY = strictBounds.getSouthWest().lat();

        if(x < minX || x > maxX || y < minY || y > maxY) {
            if (x < minX) x = minX;
            if (x > maxX) x = maxX;
            if (y < minY) y = minY;
            if (y > maxY) y = maxY;
            map.setCenter(new google.maps.LatLng(y, x));
        }
    }

Ich hoffe es hilft jemandem.

0
Mayko

Hier ist meine Variante, um das Problem der Begrenzung des sichtbaren Bereichs zu lösen.

        google.maps.event.addListener(this.map, 'idle', function() {
            var minLat = strictBounds.getSouthWest().lat();
            var minLon = strictBounds.getSouthWest().lng();
            var maxLat = strictBounds.getNorthEast().lat();
            var maxLon = strictBounds.getNorthEast().lng();
            var cBounds  = self.map.getBounds();
            var cMinLat = cBounds.getSouthWest().lat();
            var cMinLon = cBounds.getSouthWest().lng();
            var cMaxLat = cBounds.getNorthEast().lat();
            var cMaxLon = cBounds.getNorthEast().lng();
            var centerLat = self.map.getCenter().lat();
            var centerLon = self.map.getCenter().lng();

            if((cMaxLat - cMinLat > maxLat - minLat) || (cMaxLon - cMinLon > maxLon - minLon))
            {   //We can't position the canvas to strict borders with a current zoom level
                self.map.setZoomLevel(self.map.getZoomLevel()+1);
                return;
            }
            if(cMinLat < minLat)
                var newCenterLat = minLat + ((cMaxLat-cMinLat) / 2);
            else if(cMaxLat > maxLat)
                var newCenterLat = maxLat - ((cMaxLat-cMinLat) / 2);
            else
                var newCenterLat = centerLat;
            if(cMinLon < minLon)
                var newCenterLon = minLon + ((cMaxLon-cMinLon) / 2);
            else if(cMaxLon > maxLon)
                var newCenterLon = maxLon - ((cMaxLon-cMinLon) / 2);
            else
                var newCenterLon = centerLon;

            if(newCenterLat != centerLat || newCenterLon != centerLon)
                self.map.setCenter(new google.maps.LatLng(newCenterLat, newCenterLon));
        });

strictBounds ist ein Objekt vom Typ new google.maps.LatLngBounds(). self.gmap speichert ein Google Map-Objekt (new google.maps.Map()).

Es funktioniert wirklich, aber vergessen Sie nicht, die Hämorrhoiden zu berücksichtigen, wenn Sie Meridiane und Parallelen des 0.

Ab Mitte 2016 gibt es keine offizielle Möglichkeit, sichtbare Bereiche einzuschränken. Die meisten Ad-hoc-Lösungen zur Begrenzung der Grenzen haben jedoch einen Fehler, da sie die Grenzen nicht genau auf die Kartenansicht einschränken, sondern nur, wenn der Mittelpunkt der Karte außerhalb der angegebenen Grenzen liegt. Wenn Sie die Grenzen auf ein überlagerndes Bild wie ich beschränken möchten, kann dies zu einem Verhalten wie unten dargestellt führen, bei dem die darunterliegende Karte unter unserer Bildüberlagerung sichtbar ist:

 enter image description here

Um dieses Problem anzugehen, habe ich eine library erstellt, die die Grenzen erfolgreich einschränkt, sodass Sie nicht aus der Überlagerung heraus schwenken können.

Bei anderen bestehenden Lösungen besteht jedoch ein "vibrierendes" Problem. Wenn der Benutzer die Karte aggressiv genug schwenkt, nachdem er die linke Maustaste losgelassen hat, schwenkt die Karte immer noch von selbst und verlangsamt sich allmählich. Ich kehre die Karte immer wieder an die Grenzen zurück, aber das führt zu einer Art Vibration. Dieser Panning-Effekt kann derzeit nicht mit Mitteln der Js-API gestoppt werden. Es scheint, dass, bis Google Unterstützung für etwas wie map.stopPanningAnimation () hinzufügt, wir keine reibungslose Benutzererfahrung schaffen können.

Beispiel für die Verwendung der erwähnten Bibliothek, die glatteste Erfahrung mit strengen Grenzen, die ich erhalten konnte:

function initialise(){
  
  var myOptions = {
     zoom: 5,
     center: new google.maps.LatLng(0,0),
     mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
  
  addStrictBoundsImage(map);
}

function addStrictBoundsImage(map){
	var bounds = new google.maps.LatLngBounds(
		new google.maps.LatLng(62.281819, -150.287132),
		new google.maps.LatLng(62.400471, -150.005608));

	var image_src = 'https://developers.google.com/maps/documentation/' +
		'javascript/examples/full/images/talkeetna.png';

	var strict_bounds_image = new StrictBoundsImage(bounds, image_src, map);
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript">
        google.load("maps", "3",{other_params:"sensor=false"});
      </script>
<body style="margin:0px; padding:0px;" onload="initialise()">
	 <div id="map" style="height:400px; width:500px;"></div>
     <script  type="text/javascript"src="https://raw.githubusercontent.com/matej-pavla/StrictBoundsImage/master/StrictBoundsImage.js"></script>
</body>

Die Bibliothek kann auch die minimale Zoomeinschränkung automatisch berechnen. Dann wird die Zoomstufe mit dem Attribut minZoom map eingeschränkt.

Hoffentlich hilft dies jemandem, der eine Lösung wünscht, die die vorgegebenen Grenzen uneingeschränkt respektiert und kein Panning zulassen möchte.

0
Matej P.