Tester si un marqueur ou point est sur à proximité ou en dehors d'un polygone ou d'une polyline Bibliothèque géométrie sphérique

Tester la position d'un point par rapport à un Polygone ou une Polyline

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

Cartographie et webmapping

google.maps.geometry.poly

La bibliothèque google.maps.geometry contient un espace de nommage appelé poly : google.maps.geometry.poly. Celui-ci contient des fonctions utilitaires permettant de connaître la position d'un point par rapport à un polygone ou une polyline. Deux méthodes sont disponibles :

Attention : pour utiliser ces méthodes, n'oubliez pas d'ajouter la bibliothèque geometry dans l'appel du script de l'API Google Maps v3 :

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

Tester si un point est situé à l'intérieur ou l'extérieur d'un polygone - containsLocation

La méthode containsLocation permet de tester si un point, sous la forme d'un objet LatLng, est situé dans ou hors d'un polygone.

la méthode containsLocation attend deux paramètres :

  • point (objet LatLng) : point dont on veut tester ou vérifier la présence dans le polygone,
  • polygone (objet Polygon) : Polygone sur lequel est effectué le test.
et elle renvoie un booléen :
  • true : si le point est situé à l'intérieur du polygone,
  • false : si le point est situé à l'extérieur du polygone.

Le code ci-dessous permet de savoir si le point cliqué sur la carte est situé à l'intérieur ou à l'extérieur du polygone :

function initialisation(){
	var optionsCarte = {
		zoom: 8,
		center: new google.maps.LatLng(47.389982, 0.688877)
	}
	var tableauDeLatLng = [
		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 maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
	
	var monPolygone = new google.maps.Polygon( { paths:tableauDeLatLng } );
	
	google.maps.event.addListener( maCarte, "click", function( evenement ) {
		if ( google.maps.geometry.poly.containsLocation( evenement.latLng, monPolygone ) ) {
			alert("Le point cliqué est situé à l'intérieur du polygone");
		} else {
			alert("Le point cliqué est situé à l'extérieur du polygone");
		}
	});
}

Les classes Map et Polygon héritant de la classe MVCObject voici une autre écriture possible :

function initialisation(){
	var tableauDeLatLng = [
		{ lat: 47.406830, lng: 0.649909 },
		{ lat: 47.406830, lng: 0.745525 },
		{ lat: 47.390330, lng: 0.736255 },
		{ lat: 47.367547, lng: 0.689391 },
		{ lat: 47.383822, lng: 0.660037 }
	];

	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
		maCarte.setValues({
			zoom: 8,
			center: { lat: 47.389982, lng: 0.688877 }
		});

	var monPolygone = new google.maps.Polygon();
		monPolygone.set("paths", tableauDeLatLng);	

	maCarte.addListener( "click", function( evenement ) {
		if ( google.maps.geometry.poly.containsLocation( evenement.latLng, monPolygone ) ) {
			alert("Le point cliqué est situé à l'intérieur du polygone");
		} else {
			alert("Le point cliqué est situé à l'extérieur du polygone");
		}
	});
}
Attention : Vous remarquerez que lors de création du polygone on n'utilise pas la propriété map pour définir la carte sur laquelle afficher le polygone.
On ne cherche pas à afficher le polygone sur la carte, mais simplement à utiliser les données du polygone pour savoir si un point quelconque est situé à l'interieur ou à l'extérieur de ce polygone.
Sur la carte ci-dessus, un polygone est créé, symbolisé par le trait rouge.
À chaque fois que vous allez cliquer sur la carte :
  • un marqueur s'affiche sur le point cliqué :
    • vert si le point cliqué est situé sur le polygone,
    • rouge si le point cliqué est situé à l'extérieur du polygone,
  • les coordonnées GPS et la position ( intérieur ou extérieur ) de ce point par rapport au polygone s'affichent ci-dessous.
Le point sur lequel vous venez de cliquer ( Lat: , Lng: ) est situé à l' du polygone.

Vous pouvez voir un tutoriel et un exemple complet ici : Tester si un marqueur est situé à l'intérieur ou à l'extérieur d'un polygone

Tester la position d'un point par rapport à un polygone ou une polyline avec isLocationOnEdge

La méthode isLocationOnEdge(point, polygone|polyline, tolérance) permet de tester ou vérifier si un point, sous la forme d'un objet LatLng, est situé sur ou à proximité du périmètre d'un polygone ou d'une polyline, avec une certaine tolérance.

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

  • point (objet LatLng) : point dont on veut tester la présence sur ou à proximité d'une polyline ou, sur ou à proximité du bord d'un polygone,
  • polygone|polyline (objet Polygon ou Polyline) : Polygone ou Polyline sur lequel ou laquelle est effectué le test.
  • tolerance (en degrès) : la tolérance est un angle exprimé en degrès. Par défaut, la tolérance vaut 10-9 degrès.

La valeur retournée est un booléen :

  • true : le point est alors situé sur ou à proximité du polyline, ou le point est situé sur ou à proximité de la bordure du polygone,
  • false : le point n'est pas situé sur ou à proximité du polyline, ou le point n'est pas situé sur ou à proximité de la bordure du polygone.

Tester la position d'un point par rapport au périmètre d'un polygone avec isLocationOnEdge

Le code ci-dessous permet de savoir si le point cliqué sur la carte est situé sur ou à proximité de la bordure du polygone :

function initialisation(){
	var tolerance = 0.006;
	var optionsCarte = {
		zoom: 8,
		center: new google.maps.LatLng(47.389982, 0.688877)
	};
	var tableauDeLatLng = [
		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 maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );

	var monPolygone = new google.maps.Polygon( { paths:tableauDeLatLng } );

	google.maps.event.addListener( maCarte, "click", function( evenement ) {
		if ( google.maps.geometry.poly.isLocationOnEdge( evenement.latLng, monPolygone, tolerance ) ) {
			alert("Le point cliqué est situé sur ou à proximité de la bordure du polygone");
		} else {
			alert("Le point cliqué n'est pas situé sur ou à proximité de la bordure du polygone");
		}
	});
}

Les classes Map et Polygon héritant de la classe MVCObject voici une autre écriture possible :

function initialisation(){
	var tolerance = 0.006,
		tableauDeLatLng = [
			{ lat: 47.406830, lng: 0.649909 },
			{ lat: 47.406830, lng: 0.745525 },
			{ lat: 47.390330, lng: 0.736255 },
			{ lat: 47.367547, lng: 0.689391 },
			{ lat: 47.383822, lng: 0.660037 }
		];

	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
		maCarte.setValues({
			zoom: 8,
			center: {lat: 47.389982, lng: 0.688877 }
		});

	var monPolygone = new google.maps.Polygon();
		monPolygone.set( "paths", tableauDeLatLng );

	maCarte.addListener( "click", function( evenement ) {
		if ( google.maps.geometry.poly.isLocationOnEdge( evenement.latLng, monPolygone, tolerance ) ) {
			alert("Le point cliqué est situé sur ou à proximité de la bordure du polygone");
		} else {
			alert("Le point cliqué n'est pas situé sur ou à proximité de la bordure du polygone");
		}
	});
}
Attention : Vous remarquerez que lors de création du polygone on n'utilise pas la propriété map pour définir la carte sur laquelle afficher le polygone.
On ne cherche pas à afficher le polygone sur la carte, mais simplement à utiliser les données du polygone pour savoir si un point quelconque est situé sur ou à proximité de la bordure de ce polygone.
Sur la carte ci-dessus, un polygone est créé, symbolisé par le trait rouge.
À chaque fois que vous allez cliquer sur la carte :
  • un marqueur s'affiche sur le point cliqué :
    • vert si le point cliqué est sur ou à proximité de la bordure du polygone,
    • rouge si le point cliqué n'est pas sur ou à proximité de la bordure du polygone,
  • les coordonnées GPS et la position ( intérieur ou extérieur ) de ce point par rapport au polygone s'affichent ci-dessous.
Le point sur lequel vous venez de cliquer ( Lat: , Lng: ) est situé à l' du polygone.

Vous pouvez voir un tutoriel et un exemple complet ici : Tester si un marqueur est situé sur ou à proximité du périmètre d'un polygone.

Tester la position d'un point par rapport à une polyline avec isLocationOnEdge

Le code ci-dessous permet de savoir si le point cliqué est situé sur ou à proximité de la polyline :

function initialisation(){
	var tolerance = 0.006;
	var optionsCarte = {
		zoom: 8,
		center: new google.maps.LatLng(47.389982, 0.688877)
	};
	var tableauDeLatLng = [
		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 maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );

	var maPolyline = new google.maps.Polyline( { path: tableauDeLatLng } );

	google.maps.event.addListener( maCarte, "click", function( evenement ) {
		if ( google.maps.geometry.poly.isLocationOnEdge( evenement.latLng, maPolyline, tolerance ) ) {
			alert("Le point cliqué est situé sur ou à proximité de la polyline");
		} else {
			alert("Le point cliqué n'est pas situé sur ou à proximité de la polyline");
		}
	});
}

Les classes Map et Polyline héritant de la classe MVCObject voici une autre écriture possible :

function initialisation(){
	var tolerance = 0.006,
		tableauDeLatLng = [
			{ lat: 47.406830, lng: 0.649909 },
			{ lat: 47.406830, lng: 0.745525 },
			{ lat: 47.390330, lng: 0.736255 },
			{ lat: 47.367547, lng: 0.689391 },
			{ lat: 47.383822, lng: 0.660037 }
		];

	var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte") );
		maCarte.setValues({
			zoom: 8,
			center: {lat: 47.389982, lng: 0.688877 }
		});

	var maPolyline = new google.maps.Polyline();
		maPolyline.set( "path", tableauDeLatLng );
		
	maCarte.addListener( "click", function( evenement ) {
		if ( google.maps.geometry.poly.isLocationOnEdge( evenement.latLng, maPolyline, tolerance ) ) {
			alert("Le point cliqué est situé sur ou à proximité de la polyline");
		} else {
			alert("Le point cliqué n'est pas situé sur ou à proximité de la polyline");
		}
	});
}
Attention : Vous remarquerez que lors de création de la polyline on n'utilise pas la propriété map pour définir la carte sur laquelle afficher la polyline.
On ne cherche pas à afficher la polyline sur la carte, mais simplement à utiliser les données de la polyline pour savoir si un point quelconque est situé sur ou à proximité de la bordure de cette polyline.
Sur la carte ci-dessus, une polyline est créée, symbolisée par le trait rouge.
À chaque fois que vous allez cliquer sur la carte :
  • un marqueur s'affiche sur le point cliqué :
    • vert si le point cliqué est sur ou à proximité de la polyline,
    • rouge si le point cliqué n'est pas sur ou à proximité de la polyline,
  • les coordonnées GPS et la position de ce point par rapport à la polyline ( intérieur ou extérieur ) seront affichés ci-dessous.
Le point sur lequel vous venez de cliquer ( Lat: , Lng: ) situé sur ou à proximité de la polyline.

Vous pouvez voir un tutoriel et un exemple complet ici : Tester si un marqueur est situé sur ou à proximité d'une polyline.