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

APIs Google Discussion :

Mettre à jour titre et infowindows marqueurs [Google Maps]


Sujet :

APIs Google

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Gestionnaire de parc micro-informatique
    Inscrit en
    Février 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Gestionnaire de parc micro-informatique

    Informations forums :
    Inscription : Février 2017
    Messages : 6
    Par défaut Mettre à jour titre et infowindows marqueurs
    Bonjour,

    Je réalise une carte basée sur l'API v3 de maps.
    Je crée un marqueurCercle draggable entouré par un cercle suivant ce marqueur ->OK
    J'ai placé d'autres marqueursLieu contenus dans un tableau de marqueurs sur lesquels j'ai une infowindows ->OK

    Je place dans l'infowindows des marqueursLieu la distance entre ce marqueurLieu et mon MarqueurCercle ->OK

    Mon probleme :
    Comment mettre à jour dans l'infowindows des MarqueursLieu la nouvelle distance par rapport à mon centre du cercle (marqueurCercle) lorsque je déplace mon cercle ?

    Pour le moment, mon code est le suivant :
    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
     
    for (var i = 0; i < tableauLieux.length; i++) {
    var  Lieu = tableauLieux[i];
    var pointLieu = new google.maps.LatLng(Lieu[5], Lieu[6]);
    var distance = google.maps.geometry.spherical.computeDistanceBetween(centreCarte, pointLieu);
    var OptionsMarqueurLieu = {
    position: pointLieu,
    map: maCarte,
    Icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    title:Lieu[0]+'\n'+Lieu[1]+' '+'\n'+Lieu[2]+' '+Lieu[3]+'\n \n'+'Tel : '+Lieu[4]+'\n'+'Distance du foyer = '+ Math.round(distance)+' metres'
    }
    var MarqueurLieu = new google.maps.Marker(OptionsMarqueurLieu);
    contenue = '<div id="conteneurInfoBulle">' +
                                '<h3>' + Lieu[0] + '</h3>' +
                                Lieu[1] + '<br />' +
                                Lieu[2] + ' '+Lieu[3]+'<br />' +
                                'Tel : ' + Lieu[4]+'<br />' +
    							'<p> Distance du foyer = '+ Math.round(distance)+' metres'
                                '</div> ';
     
                    bindInfoWindow(MarqueurLieu, contenue,maCarte);
     
    }
    // DEBUT AJOUT
    google.maps.event.addListener( MarqueurCercle, "dragend", function( evenement ) {
    MarqueurLieu.setmap(null);
    for (var i = 0; i < tableauLieux.length; i++) {
    var  Lieu = tableauLieux[i];
    var pointLieu = new google.maps.LatLng(Lieu[5], Lieu[6]);
    var distance = google.maps.geometry.spherical.computeDistanceBetween(MarqueurCercle.getLatLng(), pointLieu);
    var OptionsMarqueurLieu = {
    position: pointLieu,
    map: maCarte,
    Icon : 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    title:Lieu[0]+'\n'+Lieu[1]+' '+'\n'+Lieu[2]+' '+Lieu[3]+'\n \n'+'Tel : '+Lieu[4]+'\n'+'Distance du foyer = '+ Math.round(distance)+' metres'
    }
    var MarqueurLieu = new google.maps.Marker(OptionsMarqueurLieu);
    contenue = '<div id="conteneurInfoBulle">' +
                                '<h3>' + Lieu[0] + '</h3>' +
                                Lieu[1] + '<br />' +
                                Lieu[2] + ' '+Lieu[3]+'<br />' +
                                'Tel : ' + Lieu[4]+'<br />' +
    							'<p> Distance du foyer = '+ Math.round(distance)+' metres'
                                '</div> ';
     
                    bindInfoWindow(MarqueurLieu, contenue,maCarte);
     
    }
    });
    // FIN AJOUT
    }
     function bindInfoWindow(marqueur, info, NomCarte) {
     var infoBulle = new google.maps.InfoWindow();
                google.maps.event.addListener(marqueur, 'click', function() {
                    infoBulle.setContent(info);
                    infoBulle.open(NomCarte, marqueur);
                });
            }
    Mes tentatives de mise à jour sont entre les lignes // DEBUT AJOUT et //FIN AJOUT

    Merci de votre aide.
    Cordialement

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    j'ai du mal à visualiser ce que tu fais
    - tu places des marqueurs sur une carte
    - tu déplaces un « pointer »
    - tu recalcules la position de chaque marqueur par rapport au « pointer »

    Dans ce cas je stockerai cette valeur dans l'enregistrement des marqueurs et ne générerai le contenu de l'infoWindow qu'au moment de l'affichage de celle-ci.
    Tu pourrais également pour chaque marqueur lui associer un contenu pour son infoWindow qui serait mis à jour en fin de déplacement du « pointer ».

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Gestionnaire de parc micro-informatique
    Inscrit en
    Février 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Gestionnaire de parc micro-informatique

    Informations forums :
    Inscription : Février 2017
    Messages : 6
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Bonjour,
    j'ai du mal à visualiser ce que tu fais
    - tu places des marqueurs sur une carte
    - tu déplaces un « pointer »
    - tu recalcules la position de chaque marqueur par rapport au « pointer »
    Bonjour,

    Oui, c'est ma logique pour le moment.
    - Je place un pointeur et crée un cercle (de rayon fixe) autour de ce pointeur. Le pointeur est déplaçable et déplace le cercle correspondant.
    - Je place un ensemble de marqueurs (fixes) et lors de l'ajout du marqueur, j'indique dans l'infowindow la distance entre ce marqueur et le pointeur.
    Tout cela fonctionne à l'initialisation de la carte.

    Par contre, ce que je voudrais, lorsque mon pointeur est "mal placé" ou nécessite d'être déplacé, que les distances pointeur-marqueurs soient mises à jour.

    Je vais tenter de mettre le calcul de distance dans la fonction de création de l'infowindows des marqueurs.

    Par contre, si une infowindows est ouverte, comment faire pour forcer la fermeture pour obliger la mise à jour ?

    Merci de votre réponse et du temps consacré à mon soucis.
    Cdlt

  4. #4
    Invité
    Invité(e)
    Par défaut
    Peut être une réponse ici et .

  5. #5
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Pour tout synchroniser, il me semble que le plus efficace est d'utiliser la méthode bindTo des objets google.maps.MVCObject pour mettre à jour le contenu de l'infoWindow associée aux markers.

    Voici un exemple qui devrait te permettre de répondre à ta problématique tout en montrant comment faire.
    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
    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
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    <!DOCTYPE HTML>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name=viewport content="width=device-width, initial-scale=1.0">
    <title>Utilisation de bindTo pour mettre à jour distance entre markers</title>
    <meta name="Author" content="NoSmoking">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.25 Verdana,sans-serif;
      background: #FFF;
    }
    #main {
      margin: auto;
      max-width: 60em;
    }
    h1, h2, h3 {
      margin: .25em 0;
      color: #069;
    }
    section {
      margin: 0 2em 1em;
    }
    a, code {
      color: #06C;
    }
    code {
      font: 1em/1.25 "Courier New",monospace;
    }
    .cadre_carte {
      width: 50em;
      height: 40em;
      margin: 0 auto;
      padding: 5px;
      border: 1px solid #ABC;
      border-radius: 5px;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    #div_carte {
      width: 100%;
      height: 100%;
      margin: auto;
    }
    .bulle {
      font: 1rem/1.25 Verdana,sans-serif;
    }
    </style>
    <script>
    function initCarte() {
      // déclaration de quelques données
      var tData = [
        { lat:44.837368, lon:-0.576144, titre:'Bordeaux'},
        { lat:45.194276, lon:5.731633,  titre:'Grenoble'},
        { lat:45.767299, lon:4.834329,  titre:'Lyon'},
        { lat:43.297612, lon:5.381042,  titre:'Marseille'},
        { lat:48.856667, lon:2.350987,  titre:'Paris'}
      ];
      var urlIconePointer = 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png';
      var urlIconeMarker  = 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png';
     
      var centre = new google.maps.LatLng(47, 1.8);
      var oInfo, oMarker;
      var oMap = new google.maps.Map(document.getElementById('div_carte'), {
        'backgroundColor': '#FFF',
        'zoom': 6,
        'center': centre,
        'zoomControlOptions': {
          'style': google.maps.ZoomControlStyle.SMALL
        },
        'mapTypeId': google.maps.MapTypeId.ROADMAP
      });
      // le pointer référence
      var oPointer = new google.maps.Marker({
        'position': centre,
        'icon' : urlIconePointer,
        'zIndex' : 10,
        'draggable': true,
        'map': oMap
      });
      // création des marqueurs
      var i, nb = tData.length;
      for (i = 0; i < nb; i += 1) {
        // création du marker
        oMarker = new google.maps.Marker({
          'position': {'lat' : tData[i].lat, 'lng': tData[i].lon},
          'map': oMap,
          'icon': urlIconeMarker,
          'zIndex' : 0,
          'title': tData[i].titre
        });
        // création infobulle
        oInfo = new google.maps.InfoWindow({
          'marqueur': oMarker,
          'content': '<div class="bulle">' + tData[i].info + '</div>'
        });
        // gestion des liaisons
        oMarker.infoBulle = oInfo;
        // ajout evenement sur marker
        google.maps.event.addListener(oMarker, 'click', function () {
          // affichage InfoWindow
          this.infoBulle.open(this.getMap(), this);
        });
        // ajout evenement sur marker si pointer déplacé
        google.maps.event.addListener(oMarker, 'pointer_changed', function () {
          // récup. du pointer
          var pointer = this.get('pointer');
          // calcul de la distance
          var distance = google.maps.geometry.spherical.computeDistanceBetween(pointer, this.getPosition()) /1000;
          var km = distance.toFixed(3) + ' km';
          // modif. contenu infoBulle
          this.infoBulle.setContent('<div class="bulle">Distance au pointer : <br>' + km +'<\/div>');
        });
        // bindTo(key:string, target:MVCObject, targetKey?:string, noNotify?:boolean)
        oMarker.bindTo('pointer', oPointer, 'position');
      }
    }
    // init lorsque la page est chargée
    google.maps.event.addDomListener(window, 'load', initCarte);
     </script>
    </head>
    <body>
    <div id="main">
      <header>
        <h1>Mise à jour distance entre markers</h1>
      </header>
      <section>
        <h2>Application</h2>
        <p>On utilise de la méthode <code>bindTo</code> des objets <code>google.maps.MVCObject</code> pour mettre à jour le contenu de l'infoWindow associée aux markers.</p>
        <p><code>bindTo(key:string, target:MVCObject, targetKey?:string, noNotify?:boolean)</code></p>
        <div class="cadre_carte">
          <div id="div_carte"></div>
        </div>
      </section>
      <section>
        <h2>Ressources</h2>
        <ul>
          <li><a href="https://developers.google.com/maps/documentation/javascript/reference#MVCObject">Les google.maps.MVCObject</a></li>
        </ul>
      </section>
    </div>
    </body>
    </html>

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Gestionnaire de parc micro-informatique
    Inscrit en
    Février 2017
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Gestionnaire de parc micro-informatique

    Informations forums :
    Inscription : Février 2017
    Messages : 6
    Par défaut
    Bonjour,

    Merci pour cette réponse très complète.
    Je teste dès que possible et vous tient informé.
    Bonne journée (et bon week end anticipé)

    Cordialement

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

Discussions similaires

  1. Mettre à jour la petite étoile dans le titre d'une JFrame
    Par anasnas dans le forum Agents de placement/Fenêtres
    Réponses: 16
    Dernier message: 05/07/2011, 15h03
  2. Réponses: 3
    Dernier message: 09/07/2004, 10h23
  3. Mettre à jour une table depuis une autre
    Par rsc dans le forum SQL
    Réponses: 4
    Dernier message: 09/07/2004, 10h08
  4. Réponses: 6
    Dernier message: 14/02/2003, 16h52

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