Comment limiter le panoramique dans Google Maps API V3?

Question

Comment limiter le panoramique dans Google Maps API V3?

Demandé el 26 de Juin, 2010: Quand la question a-t-elle été
23172 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

Dans la V2, il existait un moyen de limiter le panoramique / déplacement afin que la carte reste dans certaines limites. Comment cela se fait-il dans la V3?

Disons que je veux que les utilisateurs ne regardent que l'Europe. J'ai déjà limité le zoom, mais si j'autorise le glissement (ce que je dois faire dans ce cas, pour d'autres raisons), l'utilisateur peut alors effectuer un panoramique au-delà de la zone que je souhaite afficher.

Veuillez donner un exemple de travail ou un extrait de code - je ne suis pas un codeur expert ...

Merci!

Demandé el 26 de Juin, 2010 par E. Tal

Answer 1

5 Réponses

Answer 2

92voto

HenningJ Points 796

Je suppose que je suis un peu en retard à la fête, mais puisque c'était exactement ce dont j'avais besoin tout à l'heure ET j'ai amélioré sur elle, je pensais que je poste une réponse de toute façon.

Avec à la fois les réponses de Daniel Vassallo et brendo, l'utilisateur peut toujours utiliser la poêle de contrôle (si elle est activée) à s'éloigner de la zone. La chose @Yauhen.F mentionné dans un commentaire.

Ainsi, au lieu de l'aide de l'dragend cas, j'utilise le center_changed événement. C'est en permanence tiré pendant le déplacement et chaque fois que quelqu'un utilise la commande pan.

// bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(70.33956792419954, 178.01171875), 
     new google.maps.LatLng(83.86483689701898, -88.033203125)
);
var lastValidCenter = map.getCenter();

google.maps.event.addListener(map, 'center_changed', function() {
    if (allowedBounds.contains(map.getCenter())) {
        // still within valid bounds, so save the last valid position
        lastValidCenter = map.getCenter();
        return; 
    }

    // not valid anymore => return to last valid position
    map.panTo(lastValidCenter);
});

Par la sauvegarde de la dernière position valide en permanence au cours de ce déplacement, le mouvement va juste arrêter une fois qu'il est hors de question, au lieu de yerking en arrière une fois que les glisser terminé. ......

Répondu el 11 de Octobre, 2011 par HenningJ (796 Points )

Answer 3

22voto

Daniel Vassallo Points 142049

Le truc, c'est d'écouter l' dragend cas, et si la carte est glissé en dehors des limites autorisées, le replacer à l'intérieur. Si vous définissez vos limites autorisées en tant que LatLngBounds objet, vous pouvez utiliser l' contains() méthode, car elle renvoie true si le lat/lng argument est dans les limites.

Il est également important de limiter le niveau de zoom, mais il me semble que vous faites déjà.

Par conséquent, vous pouvez essayer l'exemple suivant:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps JavaScript API v3 Example: Limit Panning</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"> 

   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 allowedBounds = 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 (allowedBounds.contains(map.getCenter())) return;

     // Out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = allowedBounds.getNorthEast().lng(),
         maxY = allowedBounds.getNorthEast().lat(),
         minX = allowedBounds.getSouthWest().lng(),
         minY = allowedBounds.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>

Capture d'écran de l'exemple ci-dessus. L'utilisateur ne sera pas en mesure de faire glisser plus au sud ou d'extrême-orient dans ce cas:

Google Maps JavaScript API v3 Example: Limit Panning

Répondu el 27 de Juin, 2010 par Daniel Vassallo (142049 Points )

Answer 4

8voto

Koen. Points 3570

Ma version, basée sur celle de @HenningJ, mais avec quelques modifications du lastValidCenter pour permettre un glissement fluide sur les bords des limites.

 <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            #map-canvas { height: 100% }
        </style>
        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script>
        </script>
        <script type="text/javascript">
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(28.70, -127.50),
                    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map-canvas"),
                        mapOptions);

                // bounds of the desired area
                var allowedBounds = new google.maps.LatLngBounds(
                  new google.maps.LatLng(28.70, -127.50),
                  new google.maps.LatLng(48.85, -55.90)
                );
                var boundLimits = {
                    maxLat : allowedBounds.getNorthEast().lat(),
                    maxLng : allowedBounds.getNorthEast().lng(),
                    minLat : allowedBounds.getSouthWest().lat(),
                    minLng : allowedBounds.getSouthWest().lng()
                };

                var lastValidCenter = map.getCenter();
                var newLat, newLng;
                google.maps.event.addListener(map, 'center_changed', function() {
                    center = map.getCenter();
                    if (allowedBounds.contains(center)) {
                        // still within valid bounds, so save the last valid position
                        lastValidCenter = map.getCenter();
                        return;
                    }
                    newLat = lastValidCenter.lat();
                    newLng = lastValidCenter.lng();
                    if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){
                        newLng = center.lng();
                    }
                    if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){
                        newLat = center.lat();
                    }
                    map.panTo(new google.maps.LatLng(newLat, newLng));
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"/>
    </body>
</html>

Fiddle ici: http://jsfiddle.net/koenpunt/n7h6t/

Répondu el 5 de Juin, 2013 par Koen. (3570 Points )

Answer 5

3voto

brendo Points 1763

Voici une extension intéressante de ce qui précède qui réinitialisera le centre de la carte à la dernière position valide en écoutant l'événement dragstart.

 // Limit panning
var lastCenter = map.getCenter();

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

google.maps.event.addListener(map, 'dragend', function() {
    if(allowedBounds.contains(map.getCenter())) return;

    map.setCenter(lastCenter);
});

Répondu el 22 de Novembre, 2010 par brendo (1763 Points )

Answer 6

3voto

AjayR Points 2773

La meilleure méthode pour limiter consiste à définir le niveau de zoom et le point central et à désactiver les commandes telles que le zoom, le défilement, etc., comme ci-dessous.

  var latlng = new google.maps.LatLng(18.283078,84.047556);
     var myOptions = {
          zoom: 12,

          center: latlng,
          zoomControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false,
        disableDoubleClickZoom: true,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"),   myOptions);

Répondu el 5 de Octobre, 2013 par AjayR (2773 Points )

Comment limiter le panoramique dans Google Maps API V3?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment limiter le panoramique dans Google Maps API V3?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: