Tracer une polyline et afficher ses coordonnées brutes et encodées
Ce tutoriel vous permet de créer et de tracer une Polyline en cliquant sur la carte.
Au fur et à mesure de sa construction, les données de la Polyline s'affichent sous forme de données encodées (via encodePath) et de LatLng sous la carte.
Attention : n'oubliez pas d'ajouter la bibliothèque geometry lorsque vous appelez le 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>
Carte avec traçage d'une polyline et affichage de ses LatLng encodées et brutes
Tracez votre polyline en cliquant sur la carte.
Les latitudes et longitudes, des points sur lesquels vous avez cliqué, s'affichent ci-dessous sous leur forme brute et encodée.
La longueur de la chaîne contenue dans chaque colonne est précisée entre parenthèses dans les titres de colonne.
Les latitudes et longitudes, des points sur lesquels vous avez cliqué, s'affichent ci-dessous sous leur forme brute et encodée.
La longueur de la chaîne contenue dans chaque colonne est précisée entre parenthèses dans les titres de colonne.
| Latitudes et longitudes Encodées () | Latitudes et longitudes brutes () |
|---|---|
Exemple de code pour créer une polyline et afficher ses LatLng encodées et décodées
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8" />
<style>
html, body {
height: 100%;
margin: 0;
padding: 0
}
table{
width:100%
}
th{
width:50%
}
textarea{
width:100%;
height:400px;
border:1px solid #CCCCCC
}
#EmplacementDeMaCarte {
width:100%;
height:400px
}
#info {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: arial
}
</style>
<title>Titre de votre page</title>
</head>
<body>
<div id="EmplacementDeMaCarte"></div>
<table>
<tr>
<th>Polyline Encodées (<span id="longueurEncode"></span>)</th>
<th>LatLng de la Polyline (<span id="longueurLatLng"></span>)</th>
</tr>
<tr>
<td><textarea id="latlngEncodees" readonly="readonly"></textarea></td>
<td><textarea id="latlngBrutes" readonly="readonly"></textarea></td>
</tr>
</table>
<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 html = "";
var Tours = new google.maps.LatLng (47.390273,0.688834);
var optionsCarte = {
zoom: 14,
center: Tours
};
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
var optionsPolyline = {
map: maCarte,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 3
}
var polyline = new google.maps.Polyline(optionsPolyline);
var path = polyline.getPath();
google.maps.event.addListener ( maCarte, "click", function( evenement ) {
path.push ( evenement.latLng );
html = html + evenement.latLng.toUrlValue(6)+';';
var encodeString = google.maps.geometry.encoding.encodePath (path);
if (encodeString !== null) {
document.getElementById("latlngEncodees").innerHTML = encodeString;
document.getElementById("longueurEncode").innerHTML = encodeString.length;
document.getElementById("latlngBrutes").innerHTML = html;
document.getElementById("longueurLatLng").innerHTML = html.length;
}
} );
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=InsérezVotreCléApiGoogleMapsIci&libraries=geometry&callback=initialisation"></script>
</body>
</html>