Comment récupérer la valeur d'un curseur (slider) dans une variable en javascript

**sunbird** · 23/05/2012, 22h26

Bonjour,

J'essaye de faire un site pour l'école de ma fille et je cale sur (probablement une bêtise) n'étant pas du tout un pro en javascript. Je m'explique : je voudrais associer une fonction de curseur (slider)( puisée dans un script de Kgilbert) et utiliser la valeur du curseur comme rayon (aradius) pour un cercle sur une carte google.
Le curseur fonctionne bien, la carte google avec le marqueur aussi mais je cale pour faire le lien entre les deux.
De plus la récupération de cette valeur (variable) devrait également me servir comme base à un critère de sélection dans une DB sql....
Bref si quelqu'un avait la gentillesse d'éclairer ma lanterne.... (pour le moment aradius = 15000 mais je voudrais le remplacer par la récupération de la valeur du curseur)

Merci d'avance

voici le code complet de la page :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Sliders JavaScript</title>
<!-- DÉBUT inclusions nécéssaires pour les sliders -->
<link type="text/css" rel="stylesheet" href="http://manad.be/example/CSS/slider.css" />
<script type="text/javascript" src="http://manad.be/example/JS/slider.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" >
// mise en page de la carte
aradius = 15000 ;
 
function initialisation(){
var centreCarte = new google.maps.LatLng(50.6667, 4.71667);
 
if(aradius<=20000){azoom=10;}
else{if(aradius<=50000){azoom=9;}
else{if(aradius<=90000){azoom=8;}
else{if(aradius<=170000){azoom=7;}
else{azoom=6;}}}}
 
var optionsCarte = {
zoom: azoom,
center: centreCarte,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
zoomControl: false,
panControl: false,
mapTypeControl: false,
streetViewControl: false,
keyboardShortcuts: false,
scrollwheel: false,
rotateControl: false,
overviewMapControl: false,
 
}
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
 
var optionsMarqueur = {
position: centreCarte,
map: maCarte,
title: "Titre de mon premier marqueur"
}
var marqueur = new google.maps.Marker(optionsMarqueur);
 
var optionsCercle = {
center: centreCarte,
map: maCarte,
radius: aradius,
fillColor: "#FF0000",
fillOpacity: .2,
strokeColor: "#0000FF",
strokeOpacity: 1.0, trokeWeight:1,
}
 
var monCercle = new google.maps.Circle(optionsCercle);
google.maps.event.addListenerOnce(maCarte, 'tilesloaded', function(){
agrandirCercle(monCercle,0);
});
}
google.maps.event.addDomListener(window, 'load', initialisation);
 
// mise en page du curseur slider
function curseur(){
 
if(document.getElementById('slider_1')){
document.getElementById('slider_1_msg').innerHTML = document.getElementById('slider_1').value;
}}
</script>
</head>
<body onmousemove="move_mouse_cursor(event)" onmouseup="mouseup_slider()">
<div id="cadreslider">
<div id="distance" >distance en km:</div>
<div id="slider_1_div" ></div>
<div id="slider_1_msg" >0</div>
</div>
<script type="text/javascript">
init_slider('slider_1',0,0,1000000,1000000,300,curseur);
</script>
<div id="EmplacementDeMaCarte"></div>
</body>
</html>

**NoSmoking** · 23/05/2012, 22h41

Bonjour,
dans ta fonction curseur(), tu récupères la valeur du nouveau rayon, il te faut l'appliquer au cercle via la méthode setRadius applicable au objet google.maps.Circle.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function curseur() {
  if (document.getElementById('slider_1')) {
    document.getElementById('slider_1_msg').innerHTML = document.getElementById('slider_1').value;
    var rayon = parseInt( document.getElementById('slider_1').value, 10);
    monCercle.setRadius( rayon);
  }
}

attention il te faut dans ce cas déclarer la variable monCercle en globale.

Comment récupérer la valeur d'un curseur (slider) dans une variable en javascript

JavaScript

Discussions similaires

Partager

Partager