Comment limiter Google Maps V3 à une zone géographique et un niveau de zoom spécifiques ?

Restriction de la zone visible et du niveau de zoom dans Google Maps V3

Les utilisateurs peuvent rencontrer des scénarios dans lesquels il devient nécessaire de limiter Google Maps V3 dans des zones géographiques spécifiques. limites et restreindre ses capacités de zoom. Cet article explore une solution pour limiter l'affichage de la carte à une zone désignée (par exemple, un pays) tout en empêchant les utilisateurs de naviguer au-delà de ses limites. De plus, il explique comment limiter le niveau de zoom à une plage prédéfinie.

Pour y parvenir, Google Maps V3 propose les options minZoom et maxZoom. En spécifiant ces paramètres, vous pouvez établir les niveaux de zoom minimum et maximum autorisés pour l'utilisateur.

Exemple :

var map;
var opt = { minZoom: 6, maxZoom: 9 };
map = new google.maps.Map(document.getElementById('map-canvas'), opt);

Le code ci-dessus garantit que les utilisateurs ne peuvent zoomez sur la carte dans les niveaux 6 à 9 inclus. Cependant, cette solution ne répond qu'à la restriction du niveau de zoom. Pour limiter la zone visible à une région spécifique, une personnalisation supplémentaire est requise. La personnalisation des styles de la carte à l'aide de StyledMaps peut atteindre cet objectif.

Exemple :

var map;
var styles = [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.country",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  }
];

map = new google.maps.Map(document.getElementById('map-canvas'));
map.setOptions({
  styles: styles,
  minZoom: 6,
  maxZoom: 9
});

Ce code définit toutes les caractéristiques géographiques en dehors du pays désigné pour qu'elles soient invisibles, limitant ainsi la zone cartographique visible vers ce pays. Il définit également les niveaux de zoom minimum et maximum sur 6 et 9, respectivement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!