Google Maps API

Tester si un point est dans un Polygone

NoSmoking 2012-06-01

Explication

Le 21 February 2012, il a été ajouté à la version 3.8 de l'API les méthodes suivantes :

  • google.maps.geometry.poly.containsLocation();
  • google.maps.geometry.poly.isLocationOnEdge().

Plus exactement, ces deux méthodes ont été ajoutées à la librairie geometry et sont liées au namespace google.maps.geometry.poly.

Cette librairie n'étant pas chargée par défaut, il ne faut pas oublier de l'intégrer à votre document.

<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>

C'est la méthode containsLocation qui permet de tester si un point au format google.maps.LatLng est situé à l'intérieur d'un polygone fermé, au format google.maps.Polygon. Cette function retourne true si le point est à l'intérieur du polygone ou sur son bord, false dans le cas contraire.

var insidePoly = google.maps.geometry.poly.containsLocation( oLatLng, oPolygon);

Mise en application

Pour visualiser le résultat, déplacez la souris et/ou cliquez sur la carte.

 

Résultat
Indicateurs: 1 2 3
Position:  

Code utilisé

...sur le click de la carte

// gestion des evenements mouse sur la carte
google.maps.event.addListener( oCarte, 'click', function( data){
  var i, nb, oLatLng, oPoly, sMsg = '';
  oLatLng = data.latLng;
  // parcours de tous les polygones de la carte
  for( i=0, nb = this.oPoly.length; i <nb; i++){
    oPoly = this.oPoly[i];
    sMsg += '-\u00a0' +(i+1) +'\u00a0';
    sMsg += google.maps.geometry.poly.containsLocation( oLatLng, oPoly) ? ' Yes\u00a0IN' : ' Sorry\u00a0OUT';
    sMsg += '!\n';
  }
  alert( sMsg);
});

...sur le mousemove de la carte

google.maps.event.addListener( oCarte, 'mousemove', function( data){
  var i, nb, oLatLng, oPoly;
  // affichage position curseur
  this.oDivPos.innerHTML = 'lat : ' +data.latLng.toUrlValue().replace(',',', lng : ');
  oLatLng = data.latLng;
  // affichage in/out
  for( i=0, nb=this.oPoly.length; i <nb; i++){
    oPoly = this.oPoly[i];
    this.oDivIndic[i].className = google.maps.geometry.poly.containsLocation( oLatLng, oPoly) ? 'inside' : 'outside';
  }
});
Mise à jour : Janvier 2014