Tester si un marqueur est sur ou à proximité d'une Polyline

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 d'une polyline avec 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 d'une polyline.

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 à la polyline,
  • polyline : la polyline est un objet Polyline sur laquelle 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é d'une polyline,
  • false : si le point n'est pas situé sur ou à proximité d'une polyline.

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 de la polyline
	 */
	var sommetsPolyline = [
		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 polyline = new google.maps.Polyline( {
		map:maCarte,
		path:sommetsPolyline
	} );

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

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 à la polyline

Dans cet exemple, on affiche une polyline 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 polyline, il sera affiché sous la forme d'une punaise verte punaise verte.
Si lle marqueur n'est pas situé sur ou à proximité de la polyline, il sera affiché sous la forme d'une punaise rouge punaise rouge.

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

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			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 sommetsPolyline = [
					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 maPolyline = new google.maps.Polyline( {
					map:maCarte,
					path:sommetsPolyline
				} );

				google.maps.event.addListenerOnce( maCarte, 'tilesloaded', function(){ randomMarqueurs( maCarte, maPolyline ) } );
			}
			
			function randomMarqueurs( maCarte, maPolyline ) {
				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, maPolyline, 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>