Vous pouvez écouter l' dragendévénement et si la carte est déplacée en dehors des limites autorisées, replacez-la à l'intérieur. Vous pouvez définir vos limites autorisées dans un LatLngBoundsobjet, puis utiliser la contains()méthode pour vérifier si le nouveau centre lat / lng se trouve dans les limites.
Vous pouvez également limiter le niveau de zoom très facilement.
Prenons l'exemple suivant: 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>
Capture d'écran de l'exemple ci-dessus. L'utilisateur ne pourra pas traîner plus au sud ou à l'extrême est dans ce cas:
Daniel Vassallo
la source
if (x < minX) x = minX;etif (x > maxX) x = maxX;ne pas s'exclure? Pourquoi centrez-vous le canevas sur les coordonnées minX / maxX et maxX / maxY alors qu'elles ne sont pas des coordonnées du centre?dragendévénement, vous pouvez utiliserdraggable: falsesur une instance de carte ( exemple de travail )center_changedévénement au lieu dedragend.Une meilleure façon de restreindre le niveau de zoom pourrait être d'utiliser les options
minZoom/maxZoomplutôt que de réagir aux événements?Ou les options peuvent être spécifiées lors de l'initialisation de la carte, par exemple:
Voir: Référence de l'API JavaScript de Google Maps V3
la source
Bonnes nouvelles. À partir de la version 3.35 de l'API JavaScript Maps, lancée le 14 février 2019, vous pouvez utiliser une nouvelle
restrictionoption afin de limiter la fenêtre d'affichage de la carte.Selon la documentation
source: https://developers.google.com/maps/documentation/javascript/reference/map#MapRestriction
Donc, maintenant, vous ajoutez simplement une option de restriction lors d'une initialisation de la carte et cela. Jetez un œil à l'exemple suivant qui limite la fenêtre d'affichage à la Suisse
J'espère que ça aide!
la source
Pour limiter le zoom sur v.3 +. dans les paramètres de votre carte, ajoutez le niveau de zoom par défaut et les niveaux de zoom minZoom ou maxZoom (ou les deux si nécessaire) vont de 0 à 19. Vous devez déclarer un niveau de zoom sourd si une limitation est requise. tous sont sensibles à la casse!
la source
Une bien meilleure façon de limiter la portée ... utilisé la logique contient de l'affiche ci-dessus.
la source
this.googleMapau lieu demappour le deuxième auditeur? Ne devrait pas non plus l'dragStartêtredragStartCenter? Enfin qu'est-ce que c'estmapBounds?Cela peut être utilisé pour recentrer la carte vers un emplacement spécifique. C'est ce dont j'avais besoin.
la source
la source
Voici ma variante pour résoudre le problème de la limitation de la zone visible.
strictBoundsest un objet denew google.maps.LatLngBounds()type.self.gmapstocke un objet Google Map (new google.maps.Map()).Cela fonctionne vraiment mais n'oubliez pas seulement de prendre en compte les hémorroïdes avec croisement du 0e méridien et des parallèles si vos limites les couvrent.
la source
Pour certaines raisons
n'a pas fonctionné pour moi (peut-être un problème d'hémisphère sud). J'ai dû le changer pour:
J'espère que cela aidera quelqu'un.
la source
Une solution est comme, si vous connaissez la lat / lng spécifique.
Si vous n'avez pas de lat / lng spécifique
ou
la source
À partir du milieu de 2016 , il n'existe aucun moyen officiel de restreindre la zone visible. La plupart des solutions ad hoc pour restreindre les limites ont cependant un défaut, car elles ne limitent pas les limites exactement pour s'adapter à la vue de la carte, elles ne la restreignent que si le centre de la carte est en dehors des limites spécifiées. Si vous souhaitez limiter les limites à une image superposée comme moi, cela peut entraîner un comportement comme illustré ci-dessous, où la carte sous-jacente est visible sous notre superposition d'image:
Pour résoudre ce problème, j'ai créé une bibliothèque qui a réussi à restreindre les limites afin que vous ne puissiez pas sortir de la superposition.
Cependant, comme d'autres solutions existantes, il a un problème «vibrant». Lorsque l'utilisateur effectue un panoramique de la carte de manière suffisamment agressive, après avoir relâché le bouton gauche de la souris, la carte continue à se déplacer d'elle-même, ralentissant progressivement. Je renvoie toujours la carte aux limites, mais cela se traduit par une sorte de vibration. Cet effet de panoramique ne peut pas être arrêté avec les moyens fournis par l'API Js pour le moment. Il semble que jusqu'à ce que Google ajoute la prise en charge de quelque chose comme map.stopPanningAnimation (), nous ne serons pas en mesure de créer une expérience fluide.
Exemple utilisant la bibliothèque mentionnée, l'expérience de limites strictes la plus fluide que j'ai pu obtenir:
La bibliothèque est également capable de calculer automatiquement la restriction de zoom minimum. Il restreint ensuite le niveau de zoom à l'aide de
minZooml'attribut de la carte.Espérons que cela aide quelqu'un qui veut une solution qui respecte pleinement les limites données et ne veut pas permettre de s'en éloigner.
la source
Cela peut être utile.
Le niveau de zoom peut être personnalisable en fonction des besoins.
la source
e.g. only between levels 6 and 9, cela définit le niveau de zoom par défaut et supprime l'interface utilisateur par défaut (c'est+-à- dire /-) qui est un peu exagérée.