Récupérer les coordonnées d'un marqueur après qu'il soit placé
Bonjour à tous,
J'ai un problème que je n'arrive pas à résoudre d'où ma question sur le forum.
j'ai réalise ma propre carte avec Leaflet et une mosaïque que j'ai aussi réalisée.
Ce que je voudrais faire pour la suite est de récupérer les coordonnées de deux marqueurs que l'utilisateur choisis sur la carte (il les a auparavant placés bien entendu).
Pour cela je voudrais que l'utilisateur clique sur un bouton (select 1st marker), choisisse son premier marqueur, clic sur le deuxième bouton (select 2nd Merker) selectionne le deuxième marqueur.
L'idée par la suite est de cliquer sur un boutton pour calculer la distance entre les deux
Seulement je n'arrive qu'à récupérer les coordonnées du dernier marqueur placé sur la carte.
Auriez-vous une idée pour arriver à ce que je veux?
je vous met mon code
Code:
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<html style="background: rgb(204, 204, 204)" >
<!-- saved from url=(0014)about:internet -->
<head>
<meta charset="UTF-8" />
<title>test</title>
<link rel="icon" type="icon/png" href="icone.png">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<h1>
<center><strong> UAV Maps </strong></center>
<div> <img src="images.png" type ="image/png"/></div>
</h1>
<body>
<div id="map">
<input id="calc" type="image" src="icon_calculatrice.png" class="img1"/>
<input type="checkbox" id="test" name="test" onclick="check()" />
<input type="button" id="but-eff" value="Remove marker" onclick="supprime()"/>
<input type="button" id="sel1" name="sel1" value="Select 1st marker" onclick="selectM1()"/>
<input type="button" id="sel2" name="sel2" value="Select 2nd marker" onclick="selectM2()"/>
</div>
<script type="text/javascript">
var marqueur;
var map;
var markertest;
var tab = new L.LayerGroup();
console.log(tab);
// checkbox initilser a faux au chargement de la page
unable_check=document.getElementById("test");
unable_check.checked=false;
// test de la checkbox pour connaitre sont état
var test_check = false;
var efface = document.getElementById('test');
function check() {
if (efface.checked == true ){
test_check = true;
console.log('ok');
}
else if ( efface.checked == false)
{ test_check = false
console.log('NOK');
}
}
// affichage de la carte aux coordonnées et au niveau de zoom choisis
map = L.map('map').setView([-85, -179.65], 10);
// création de la carte avec les tuiles présente dans le dossier
L.tileLayer('eso/{z}/{x}/{y}.jpg', {
minZoom: 9,
maxZoom: 15,
attribution: 'University of Lisbon/Antony Vigneron',
tms:true
}).addTo(map);
map.on('click', onMapClick);
// fonction affichant un marker lors du clic sur un point de la carte. mofication de l'affichage de la souris
/* markertest=L.marker([-85, -179.65]).addTo(map);*/
function onMapClick(e) {
if (test_check==true){
var curseur = document.getElementById('map');
curseur.style.cursor='pointer';
var coord = e.latlng.toString();
marqueur = L.marker([e.latlng.lat,e.latlng.lng]).bindPopup("<center> Coordinates : </center>" +"<br>" + e.latlng.lat + "; " + e.latlng.lng + "</br>"/*+ "<br><center><input type='button' id='erase' value='Delete this marker' class='marker-delete-button'/></center></br>" */);
marqueur.addTo(tab);
map.addLayer(tab);
console.log(tab);
var x = e.latlng.lat;
var y = e.latlng.lng;
/*console.log(x,y); */
}
else if (test_check==false){
var curseur = document.getElementById('map');
curseur.style.cursor='grab';
}
}
function supprime(e) {
tab.clearLayers();
}
/*
function SupOne() {
var tempMarker = this;
$(".marker-delete-button:visible").click(function () {
map.removeLayer(tempMarker);
});
}*/
function selectM1(e){
marqueur.on('click', function(e){
if (test_check==false){
var coord1x = e.latlng.lat ;
var coord1y = e.latlng.lng;
console.log(coord1x, coord1y);
}
});
}
</script>
</body>
</html> |
Merci d'avance à vous
