Google Maps v3-limite de la zone visible et du niveau de zoom
est-il possible de limiter Google map v3 à une certaine zone? Je veux autoriser l'Affichage Seulement d'une zone (par exemple un pays) et interdire à l'utilisateur de glisser ailleurs. Aussi je veux restreindre le niveau de zoom-par exemple seulement entre les niveaux 6 et 9. Et je veux utiliser tous les types de cartes de base.
y a-t-il un moyen d'y parvenir?
j'ai eu un succès partiel avec la limitation du niveau de zoom en utilisant StyledMap, mais j'ai réussi seulement avec la carte routière restrictive, I Je n'ai pas pu limiter zoom sur d'autres types de base de cette façon.
Merci pour toute aide
11 réponses
vous pouvez écouter l'événement dragend , et si la carte est entraînée hors des limites autorisées, déplacez-la à l'intérieur. Vous pouvez définir vos limites autorisées dans un objet LatLngBounds et ensuite utiliser la méthode contains() pour vérifier si le nouveau centre lat/lng est dans les limites.
vous pouvez également limiter le niveau de zoom très facilement.
prenons l'exemple suivant: Violon Démo
<!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 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:
une meilleure façon de restreindre le niveau de zoom pourrait être d'utiliser les options minZoom / maxZoom plutôt que de réagir aux événements?
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
ou les options peuvent être spécifiées lors de l'initialisation de la carte, par exemple:
var map = new google.maps.Map(document.getElementById('map-canvas'), opt);
pour limiter le zoom sur v. 3+. dans votre paramètre map ajouter le niveau de zoom par défaut et minZoom ou maxZoom (ou les deux si nécessaire) les niveaux de zoom sont de 0 à 19. Vous devez déclarer le niveau de zoom deafult si la limitation est requise. tous sont sensibles à la casse!
function initialize() {
var mapOptions = {
maxZoom:17,
minZoom:15,
zoom:15,
....
meilleur moyen de limiter la portée... utilisé la logique contient de l'affiche ci-dessus.
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);
});
myOptions = {
center: myLatlng,
minZoom: 6,
maxZoom: 9,
styles: customStyles,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Ceci peut être utilisé pour re-centrer la carte à un endroit précis. Qui est ce dont j'avais besoin.
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));
}
});
voici ma variante pour résoudre le problème de la limitation de la zone visible.
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 est un objet du type new google.maps.LatLngBounds() . self.gmap stocke un objet Google Map ( new google.maps.Map() ).
ça marche vraiment, mais n'oubliez pas de prendre en compte les hémorroïdes en traversant les méridiens et les parallèles si vos bornes les couvrent.
Pour une raison quelconque, 151930920"
if (strictBounds.contains(map.getCenter())) return;
n'a pas fonctionné pour moi (peut-être un problème de l'hémisphère sud). J'ai dû le changer en:
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));
}
}
j'Espère que ça aidera quelqu'un.
une solution est comme, si vous connaissez le lat/lng spécifique.
google.maps.event.addListener(map, 'idle', function() {
map.setCenter(new google.maps.LatLng(latitude, longitude));
map.setZoom(8);
});
Si n'ont pas de lat/lng
google.maps.event.addListener(map, 'idle', function() {
map.setCenter(map.getCenter());
map.setZoom(8);
});
ou
google.maps.event.addListener(map, 'idle', function() {
var bounds = new google.maps.LatLngBounds();
map.setCenter(bounds.getCenter());
map.setZoom(8);
});
à partir du milieu de 2016 , il n'y a aucun moyen officiel de restreindre la zone visible. La plupart des solutions ad-hoc pour restreindre les limites ont un défaut cependant, parce qu'elles ne restreignent pas les limites exactement pour s'adapter à la vue de carte, ils ne la restreignent que si le centre de la carte est en dehors des limites spécifiées. Si vous voulez restreindre les limites à l'image superposée comme moi, cela peut entraîner un comportement comme illustré ci-dessous, où la carte sous-jacente est visible sous notre image superposition:
pour aborder cette question, j'ai créé une bibliothèque , qui avec succès restreindre les limites de sorte que vous ne pouvez pas sortir de la superposition.
cependant, comme les autres solutions existantes, il a un problème" vibrant". Lorsque l'utilisateur déplace la carte assez agressivement, après qu'ils relâchez le bouton gauche de la souris, la carte continue de panoramique par lui-même, progressivement ralentir. Je renvoie toujours la carte aux limites, mais cela se traduit par une sorte de vibration. Cet effet ne peut être arrêté par aucun moyen fourni par L'API Js pour le moment. Il semble que jusqu'à ce que google ajoute le soutien pour quelque chose comme la carte.stopPanningAnimation() nous ne serons pas en mesure de créer une expérience agréable.
exemple en utilisant la bibliothèque mentionnée, l'expérience la plus douce des limites strictes que j'ai pu obtenir:
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> la Bibliothèque est également capable de calculer la restriction de zoom minimum automatiquement. Il restreint ensuite le niveau de zoom en utilisant l'attribut minZoom map.
Espérons que cela aide quelqu'un qui veut une solution qui respecte pleinement les donné limites et ne souhaitez pas autoriser panoramique.
Cela peut être utile.
var myOptions = {
center: new google.maps.LatLng($lat,$lang),
zoom: 7,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
le niveau de Zoom peut être personnalisé selon les besoins.