IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Suppression de marker


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2016
    Messages : 28
    Points : 17
    Points
    17
    Par défaut Suppression de marker
    Bonjour à tous,


    J'ai crée ma propre carte en utilisant leaftlet et j'arrive à afficher des markers.
    Mon seul problème est que je ne trouve pas comment les supprimer tous en même temps en cliquant sur un bouton

    Code : 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
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
     
    <html style="background: rgb(204, 204, 204)" >
     
    <head>
        <meta charset="UTF-8" />
        <title>UAV maps</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"/> 
       	<script src="jquery-2.1.1.min.js"></script>  
    </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" value="effacer" onclick=""/>
    </div>
     
    <script>
    var marqueur;
    var map;
    var markertest;
     
    // checkbox initialiser 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: 'Universidade de Lisboa/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
     
    // affichage d'un marker test
        markertest=L.marker([-85, -179.65]);
        map.addLayer(markertest);
     
    //fonction affichant le marker lors du clic
     
        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]);
            	map.addLayer(marqueur);
     
            	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'; 
            }
        }
    </script>
    </body>
    </html>
    j'aimerais pouvoir le faire en cliquant sur le bouton id="but"

    auriez vous une piste ?

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    je serais toi je passerais par un new L.LayerGroup() et ajouterais les markers à celui ci.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2016
    Messages : 28
    Points : 17
    Points
    17
    Par défaut
    je vais chercher de ce coté la alors.
    et donc l'idée c'est de remplir se groupe et de le supprimer lors du clic ?

    Merci pour ta réponse.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    et donc l'idée c'est de remplir se groupe et de le supprimer lors du clic ?
    pas exactement, il existe une méthode, clearLayers(), pour supprimer les marqueurs contenu dans le LayerGrooup sans te poser de question.
    En gros
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    // création et ajout du LayerGroup
    lgMarkers = new L.LayerGroup();
    oMap.addLayer(lgMarkers);
    // fonction sur click oMap
    oMap.on('click', function (e) {
        L.marker([e.latlng.lat, e.latlng.lng]).addTo(lgMarkers);
    });
    et pour les supprimer il te suffit de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function layerRemoveMarkers() {
        lgMarkers.clearLayers();
    }

  5. #5
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2016
    Messages : 28
    Points : 17
    Points
    17
    Par défaut
    Parfait,
    je vais essayer de nouveau avec cette méthode car je ne suis pas parvenue à faire ce que je voulais.
    Merci à toi.

  6. #6
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2016
    Messages : 28
    Points : 17
    Points
    17
    Par défaut
    Ca marche nickel je te remercie.


    autre petite question:
    Si je veux maintenant supprimer un seul marker lorsque je clic sur un bouton présent dans le popup comment dois-je procéder ?

    je voulais faire quelque chose comme

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    marqueur = L.marker([e.latlng.lat,e.latlng.lng]).bindPopup("Les coordonnées du points sont :" + e.latlng.lat + "; " + e.latlng.lng + "<br><input type='button' id='erase' value='Delete this marker' class='marker-delete-button'/></br>" );
     
    marqueur.on("popupopen", SupOne);
     
     
    function SupOne() {
        var tempMarker = this;
            $(".marker-delete-button:visible").click(function () {
            map.removeLayer(tempMarker);
        });
    }
    En faisant ça j'obtiens "ReferenceError: $ is not defined"

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    "ReferenceError: $ is not defined"
    visiblement tu utilises jQuery mais tu ne le charge pas.

    Tu peux faire simplement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    // sur le click du marker la popup s'ouvre
    marqueur.on('popupopen', function () {
        var mark = this;
        var oBtn = document.querySelector('.marker-delete-button');
        oBtn.onclick = function () {
            lgMarkers.removeLayer(mark);
        };
    });
    [EDIT : 13/07] correction du code, référence au this

  8. #8
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2016
    Messages
    28
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2016
    Messages : 28
    Points : 17
    Points
    17
    Par défaut
    parfait merci à toi

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Google Maps] Suppression de marker
    Par cocobelle89 dans le forum APIs Google
    Réponses: 3
    Dernier message: 11/09/2012, 20h04
  2. Suppression de marker
    Par Kahlyv dans le forum APIs Google
    Réponses: 3
    Dernier message: 24/02/2009, 11h01
  3. Suppression de la contrainte unique
    Par mika dans le forum SQL
    Réponses: 3
    Dernier message: 20/02/2003, 18h56
  4. [CR] suppression du bas de page
    Par grosjej dans le forum SAP Crystal Reports
    Réponses: 3
    Dernier message: 10/09/2002, 09h58
  5. Réponses: 3
    Dernier message: 12/06/2002, 22h15

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo