vendredi 20 mai 2016 03:47

Créer un cercle modifiable et récupérer son nouveau centre et rayon

Polygone Polygon exemples et tutoriels en Français

API Google Maps JavaScript version 3

Comment créer un cercle modifiable avec la propriété editable ?

Ce tutoriel est basé sur le code de l'exemple intitulé : Créer et afficher un cercle sur une carte Google Maps.

Nous allons compléter ce code afin de pouvoir modifier, par glissement, le centre et la rayon du cercle, à l'aide de la propriété editable d'un objet CircleOptions.

Un bouton ( <div/>) sera également créé pour autoriser ou interdire la modification du cercle sur la carte.

Enfin, nous verrons :

Carte avec cercle modifiable (centre et rayon)

Faites glisser le cercle sur la carte en cliquant puis déplaçant le point blanc situé en son centre
et/ou
modifiez son rayon en cliquant puis déplaçant l'un des points blancs situés sur son périmètre.

Cliquez sur le bouton "Inverser Editable" pour inverser la valeur de la propriété "editable" du cercle.

Inverser Editable
true
Lorsque vous modifiez les caractéristiques du cercle (centre et/ou rayon) les nouvelles valeurs s'afficheront ci-dessous.
500
47.251037,0.786379

- true : le cercle est modifiable. Vous pouvez déplacer le centre du cercle et modifier son rayon par glissement sur la carte.
- false : le cercle n'est pas modifiable.

Cercle modifiable avec editable: true

Pour qu'un cercle soit modifiable (centre et rayon) il suffit d'affecter la valeur true à la propriété editable du cercle.

var optionsCercle = {
	map: maCarte,
	center: new google.maps.LatLng( 47.647891, 2.369852),
	radius: 500,
	editable: true
};
var monCercle = new google.maps.Circle( optionsCercle );

Autre écriture possible en utilisant les différentes méthodes de la classe Circle :

var monCercle = new google.maps.Circle();
	monCercle.setMap( maCarte );
	monCercle.setCenter( new google.maps.LatLng( 47.647891, 2.369852) );
	monCercle.setRadius( 500 );
	monCercle.setEditable( true );

Autre écriture possible, la classe Circle héritant de la classe la classe MVCObject :

var monCercle = new google.maps.Circle();
	monCercle.set( "map", maCarte );
	monCercle.set( "center", new google.maps.LatLng( 47.647891, 2.369852) );
	monCercle.set( "radius", 500 );
	monCercle.set( "editable", true );

Cercle non modifiable avec editable: false

Pour qu'un cercle soit non modifiable (centre et rayon) il suffit d'affecter la valeur false à la propriété editable du cercle.

Par défaut, un cercle est non modifiable. On peut donc, soit omettre la propriété editable du cercle :

var optionsCercle = {
	map: maCarte,
	center: new google.maps.LatLng( 47.647891, 2.369852),
	radius: 500
};
var monCercle = new google.maps.Circle( optionsCercle );

soit l'indiquer façon explicite :

var optionsCercle = {
	map: maCarte,
	center: new google.maps.LatLng( 47.647891, 2.369852),
	radius: 500,
	editable: false
};
var monCercle = new google.maps.Circle( optionsCercle );

Autre écriture possible en utilisant les différentes méthodes de la classe Circle :

var monCercle = new google.maps.Circle();
	monCercle.setMap( maCarte );
	monCercle.setCenter( new google.maps.LatLng( 47.647891, 2.369852) );
	monCercle.setRadius( 500 );
	monCercle.setEditable( false );

Autre écriture possible, la classe Circle héritant de la classe la classe MVCObject :

var monCercle = new google.maps.Circle();
	monCercle.set( "map", maCarte );
	monCercle.set( "center", new google.maps.LatLng( 47.647891, 2.369852) );
	monCercle.set( "radius", 500 );
	monCercle.set( "editable", false );

Obtenir la valeur de la propriété editable du cercle avec la méthode getEditable

/**
* Javascript
*/
var optionsCercle = {
	map: maCarte,
	center: new google.maps.LatLng( 47.647891, 2.369852),
	radius: 500,
	editable: true
};

var monCercle = new google.maps.Circle( optionsCercle );

google.maps.event.addDomListener( document.getElementById("boutonEditable"), 'click', function() {
	document.getElementById("valeurEditable").innerHTML =  monCercle.getEditable();
});

/**
* Dans le BODY
*/
<div id="boutonEditable"></div>
<div id="valeurEditable"></div>

La classe Circle héritant de la classe MVCObject il est également possible d'utiliser la méthode get.

/**
* Javascript
*/
var monCercle = new google.maps.Circle();

monCercle.set( "map", maCarte );
monCercle.set( "center", new google.maps.LatLng( 47.647891, 2.369852) );
monCercle.set( "radius", 500 );
monCercle.set( "editable", false );

google.maps.event.addDomListener( document.getElementById("boutonEditable"), 'click', function() {
	document.getElementById("Editable").innerHTML =  monCercle.get("editable");
});

/**
* Dans le BODY
*/
<div id="boutonEditable"></div>
<div id="valeurEditable"></div>

Modifier la valeur de la propriété editable du cercle avec la méthode setEditable

La méthode setEditable permet de modifier la valeur de la propriété editable d'un cercle.

/**
* Le Cercle est initialisé avec editable: false
*/
var optionsCercle = {
	map: maCarte,
	center: new google.maps.LatLng( 47.647891, 2.369852),
	radius: 500,
	editable: false
};
var monCercle = new google.maps.Circle( optionsCercle );


/**
* Par la suite, dans le code, il est possible de modifier
* la valeur de la propriété editable à l'aide de la 
* méthode setEditable.
* Ici on bascule la valeur de la propriété editable sur true.
*/
monCercle.setEditable( true );

La classe Circle héritant de la classe MVCObject il est également possible d'utiliser la méthode set.

/**
* Le Cercle est initialisé avec editable: false
*/
var optionsCercle = {
	map: maCarte,
	center: new google.maps.LatLng( 47.647891, 2.369852),
	radius: 500,
	editable: false
};
var monCercle = new google.maps.Circle( optionsCercle );


/**
* Par la suite, dans le code, il est possible de modifier
* la valeur de la propriété editable à l'aide de la 
* méthode setEditable.
* Ici on bascule la valeur de la propriété editable sur true.
*/
monCercle.set( "editable", true );

Récupérer la valeur de la propriété radius (rayon) du cercle avec la méthode getRadius

Pour connaître le nouveau rayon du cercle modifié, nous allons créer un observateur d'événement chargé de surveillé l'événement radius_changed.

Puis, nous utiliserons la méthode getRadius afin de récupérer la valeur de la propriété radius du cercle. Le rayon est exprimé en mètre.

var optionsCercle = {
	map: maCarte,
	center: new google.maps.LatLng( 47.647891, 2.369852),
	radius: 500,
	editable: true
};
var monCercle = new google.maps.Circle( optionsCercle );

google.maps.event.addListener( monCercle, "radius_changed", function(){
	alert( monCercle.getRadius() );
} );

Récupérer la valeur de la propriété center (centre) du cercle avec la méthode getCenter

Pour connaître les coordonnées du nouveau centre du cercle modifié, nous allons créer un observateur d'événement chargé de surveillé l'événement center_changed.

Puis, nous utiliserons la méthode getCenter afin de récupérer la valeur de la propriété center du cercle.

var optionsCercle = {
	map: maCarte,
	center: new google.maps.LatLng( 47.647891, 2.369852),
	radius: 500,
	editable: true
};
var monCercle = new google.maps.Circle( optionsCercle );

google.maps.event.addListener( monCercle, "center_changed", function(){
	alert( monCercle.getCenter() );
} );

Code pour afficher et modifier les propriétés draggable et editable d'un cercle à l'aide d'un bouton

Ce code permet de modifier la valeur de la propriété draggable et editable d'un cercle pour le rendre fixe ou mobile et modifier ou non son rayon.

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style>
			html, body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 80%
			}
			#boutons{
				margin: 1em;
				padding: 1em;
				text-align:center;
			}
			.bouton{
				display:inline-block;
				width: 180px;
				height: 20px;
				margin: 1em;
				padding: .6em;
				background-color: white;
				border-color: 1px solid grey;
				cursor: pointer;
				text-align: center;
			}
			.true{color:green}
			.false{color:red}
			#cadre {
				border-left: 10px solid #FFA606;
				border-right: 10px solid #FFA606;
				background: #FFF6C8;
				padding: 1em;
				margin: 1em 0;
				text-align: left;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
				border-radius: 5px;
			}
		</style>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></div>
		<div id="cadre">
			Cliquez sur le bouton "<strong>Inverser Editable</strong>" pour modifier la valeur de la propriété "<strong>editable</strong>" du cercle.<br/>
			- <span class="true">true</span> : le cercle est modifiable. Vous pouvez déplacer le centre du cercle et modifier son rayon par glissement sur la carte.<br/>
			- <span class="false">false</span> : le cercle n'est pas modifiable.<br/>
			<div id="boutons">
				<div id="boutonEditable" class="bouton">Inverser Editable</div>
				<div id="valeurEditable" class="bouton">true</div>
				<hr/>
				Lorsque vous modifiez les caractéristiques du cercle (centre et/ou rayon) les nouvelles valeurs s'afficheront ci-dessous.<br/>
				<div id="valeurRayon" class="bouton">500</div>
				<div id="valeurCentre" class="bouton">47.251037,0.786379</div>
			</div>

		</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 centreCarte = new google.maps.LatLng( 47.251037, 0.786379 );
				var optionsCarte = {
					zoom: 14,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map( document.getElementById("EmplacementDeMaCarte"), optionsCarte );
				var optionsCercle = {
					map: maCarte,
					center: maCarte.getCenter(),
					radius: 500,
					editable: true
				};
				var monCercle = new google.maps.Circle( optionsCercle );
				
				google.maps.event.addDomListener( document.getElementById("boutonEditable"), 'click', function() {
					( monCercle.getEditable() ) ? monCercle.setEditable( false ) :  monCercle.setEditable( true ) ;
					if ( monCercle.getEditable() ) {
						document.getElementById("valeurEditable").innerHTML =  monCercle.getEditable();
						document.getElementById("valeurEditable").style.backgroundColor = "green";
						monCercle.setValues({"fillColor":"#00FF00","strokeColor":"#00FF00"});
					} else {
						document.getElementById("valeurEditable").innerHTML =  monCercle.getEditable();
						document.getElementById("valeurEditable").style.backgroundColor = "red";
						monCercle.setValues({"fillColor":"#FF0000","strokeColor":"#FF0000"});
					}
				});
				google.maps.event.addListener( monCercle, "radius_changed", function(){
					document.getElementById("valeurRayon").innerHTML =  monCercle.getRadius();
				});
				google.maps.event.addListener( monCercle, "center_changed", function(){
					document.getElementById("valeurCentre").innerHTML =  monCercle.getCenter().toUrlValue();
				});
				google.maps.event.addListenerOnce( maCarte, "tilesloaded", function() {
					google.maps.event.trigger( document.getElementById("boutonEditable"), "click" );
				})
			}
		</script>
		<script async defer src="http://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&callback=initialisation"></script>
	</body>
</html>