Tester si un marqueur est sur ou à proximité du périmètre d'un Polygone

Bibliothèque géométrie sphérique ( Geometry Library ) exemples et tutoriels en Français

Cartographie et webmapping

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Tester si un point est sur, à proximité ou en dehors du périmètre d'un polygone isLocationOnEdge

Dans ce tutoriel nous allons utiliser la méthode isLocationOnEdge() contenue dans l'espace de nommage google.maps.geometry.poly, pour vérifier si un marqueur est situé sur, à proximité (avec une certaine tolérance) ou en dehors de la bordure d'un polygone.

La méthode isLocationOnEdge( point, polygone|polyline, tolerance ) attend trois paramètres :

  • point : le point est un objet LatLng dont on veut tester la position par rapport au polygone,
  • polygone : le polygone est un objet Polygon sur lequel est effectué le contrôle,
  • tolerance : la tolérance est un angle exprimé en degrès. Par défaut, la tolérance vaut 10-9 degrès,
et retourne un booléen :
  • true : si le point est situé sur ou à proximité du périmètre du polygone,
  • false : si le point n'est pas situé sur ou à proximité de la bordure du polygone.
function initialisation(){
	/**
	 * Création de la carte
	 */
	var optionsCarte = {
		zoom: 8,
		center: new google.maps.LatLng(47.389982, 0.688877)
	}
	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );

	/**
	 * Tolérance
	 */
	var tolerance = 0.006;

	/**
	 * Création du point
	 */
	var point = new google.maps.LatLng( 47.389982, 0.688877 );

	/**
	 * Création du polygone
	 */
	var sommetsDuPolygone = [
		new google.maps.LatLng(47.406830, 0.649909),
		new google.maps.LatLng(47.406830, 0.745525),
		new google.maps.LatLng(47.390330, 0.736255),
		new google.maps.LatLng(47.367547, 0.689391),
		new google.maps.LatLng(47.383822, 0.660037)
	];
	var polygone = new google.maps.Polygon( {
		map:maCarte,
		paths:sommetsDuPolygone
	} );

	/**
	 * On teste si le point est contenu dans le polygone
	 */
	if ( google.maps.geometry.poly.isLocationOnEdge( point, polygone, tolerance ) ) {
		/**
		 * Code à executer si :
		 * le point est situé sur ou à proximité de la bordure du polygone
		 */
		 alert("Le point est situé sur ou à proximité de la bordure du polygone");
	} else {
		/**
		 * Code à executer si :
		 * le point n'est pas situé sur ou à proximité de la bordure du polygone
		 */
		 alert("Le point n'est pas situé sur ou à proximité de la bordure du polygone");
	}
}

Attention : n'oubliez pas d'ajouter la bibliothèque geometry lorsque vous appelez le script de l'API Google Maps v3 :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>

Carte avec marqueurs différents en fonction de leur position par rapport au périmètre du polygone

Dans cet exemple, on affiche un polygone sur une carte, puis on génère de façon aléatoire une centaine de marqueurs.
Si le marqueur est situé sur ou à proximité de la bordure du polygone, il sera affiché sous la forme d'une punaise verte punaise verte.
Si le marqueur n'est pas situé sur ou à proximité de la bordure du polygone, il sera affiché sous la forme d'une punaise rouge punaise verte.

Exemple de code pour vérifier la position d'un point par rapport à la bordure d'un polygone

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Titre de votre page</title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
		</style>

	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
		<script>
			function initialisation() {

				var optionsCarte = {
					center: new google.maps.LatLng(47.389982, 0.688877),
					zoom: 13,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );

				var sommetsPolygone = [
					new google.maps.LatLng(47.406830, 0.649909),
					new google.maps.LatLng(47.406830, 0.745525),
					new google.maps.LatLng(47.390330, 0.736255),
					new google.maps.LatLng(47.367547, 0.689391),
					new google.maps.LatLng(47.383822, 0.660037)
				];

				var monPolygone = new google.maps.Polygon( {
					map:maCarte,
					paths:sommetsPolygone
				} );

				google.maps.event.addListenerOnce( maCarte, 'tilesloaded', function(){ randomMarqueurs( maCarte, monPolygone ) } );
			}
			
			function randomMarqueurs( maCarte, monPolygone ) {

				var tolerance = 0.006;

				var imageMarqueurRouge = {
					url: 'https://static.touraineverte.fr/googlemapsapiversion3/pointeRouge.png',
					size: new google.maps.Size(18, 34),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(9, 34)
				};

				var imageMarqueurVert = {
					url: 'https://static.touraineverte.fr/googlemapsapiversion3/pointeVerte.png',
					size: new google.maps.Size(18, 34),
					origin: new google.maps.Point(0,0),
					anchor: new google.maps.Point(9, 34)
				};

				var limites  = maCarte.getBounds(),
					nordEst  = limites.getNorthEast(),
					sudOuest = limites.getSouthWest(),
					lngSpan  = nordEst.lng() - sudOuest.lng(),
					latSpan  = nordEst.lat() - sudOuest.lat();

				for ( i = 0; i < 100; i++ ) {

					var latitude  = sudOuest.lat() + latSpan * Math.random(),
						longitude = sudOuest.lng() + lngSpan * Math.random(),
						point     = new google.maps.LatLng( latitude, longitude );

					var marqueur = new google.maps.Marker( {
						map: maCarte,
						position: point
					} );

					if ( google.maps.geometry.poly.isLocationOnEdge( point, monPolygone, tolerance ) ) {
						marqueur.setIcon( imageMarqueurVert );
					} else {
						marqueur.setIcon( imageMarqueurRouge );
					}
				}
			}
		</script>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>
	</body>
</html>