Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polygon Arrays</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.35
});
google.maps.event.addListener(bermudaTriangle, 'mouseover', function() {
bermudaTriangle.setOptions({
editable: true
});
});
google.maps.event.addListener(bermudaTriangle, 'mouseout', function() {
bermudaTriangle.setOptions({
editable: false
});
});
google.maps.event.addListener(bermudaTriangle.getPath(), 'set_at', function() {
console.log(bermudaTriangle.getPath());
});
bermudaTriangle.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
infowindow = new google.maps.InfoWindow();
}
function showArrays(event) {
// Since this Polygon only has one path, we can call getPath()
// to return the MVCArray of LatLngs
var vertices = this.getPath();
var contentString = "<b>Bermuda Triangle Polygon</b><br />";
contentString += "Clicked Location: <br />" + event.latLng.lat() + "," + event.latLng.lng() + "<br />";
// Iterate over the vertices.
for (var i =0; i < vertices.length; i++) {
var xy = vertices.getAt(i);
contentString += "<br />" + "Coordinate: " + i + "<br />" + xy.lat() +"," + xy.lng();
}
// Replace our Info Window's content and position
infowindow.setContent(contentString);
infowindow.setPosition(event.latLng);
infowindow.open(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Code : Tout sélectionner
// Ce fichier nous permet de faire le lien entre le programme JavaScript qui s'effectue du coté client
// Et du programme PHP qui s'effectue du coté serveur
var validation = function(){ // quand on clique sur le bouton Valider, cette fonction va s'executer
// Définition des variables pour AJAX
var oXhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
oXhr.onreadystatechange = function(){
if( oXhr.readyState === 4 && oXhr.status === 200){
alert(oXhr.responseText);
}
};
// On récupère les valeurs des select
var lat_point = document.getElementById('lat_point').textContent; // On récupère les valeurs des select
var long_point = document.getElementById('lng_point').textContent;
var _id_cap = document.getElementById('_id_cap').textContent;
// On définit la méthode à utiliser et l'url de la page à charger
oXhr.open('POST', 'enregistrement.php', true);
oXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// On définit quelles variables envoyer
oXhr.send("&_id_cap="+_id_cap+"&latitude_centre="+lat_point+"&longitude_centre="+long_point);
};
Voila merci pour vos réponses
