1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
| <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
table { width: 100%; height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var map;
var mapOptions = {
center: new google.maps.LatLng(48.6936, 6.1846),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true
};
var markers = [];
var line;
function initialize() {
map = new google.maps.Map($("map_canvas"), mapOptions);
line = new google.maps.Polyline({
map: map,
strokeColor: "#FF3333",
strokeOpacity: 0.5,
strokeWeight: 8
});
//
google.maps.event.addListener(map, 'dblclick', function(event) {
marker.setMap(null);
alert(" Je vais arreter le processus");
delMarkers();
});
//
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
map: map,
position: event.latLng,
icon:"vertix.png"
});
markers.push(marker);
drawPath();
});
}
function countMarkers() {
count = 0;
for (var i = markers.length - 1; i >= 0; i--) {
if (markers[i].getMap() == null) {
markers.splice(i, 1);
} else {
count++;
}
}
return count;
}
function drawPath() {
countMarkers();
var coords = [];
for (var i = 0; i < markers.length; i++) {
coords.push(markers[i].getPosition());
}
line.setPath(coords);
meters = google.maps.geometry.spherical.computeLength(coords);
$("distKm").value = Math.round(meters/1000 * 100) / 100;
}
function delMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null)
}
drawPath();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table border="0">
<tr>
<td width="50%" valign="top" id="map_canvas">
</td>
<td width="50%" valign="top">
<form id="form">
<input id="distKm" type="text"> km
<input id="button1" type="button" value="Clear markers" onclick="delMarkers()">
</form>
</td>
</tr>
</table>
</body>
</html> |
Partager