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 :

Affichage multiple de kml sous IE


Sujet :

APIs Google

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2014
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Mars 2014
    Messages : 39
    Points : 26
    Points
    26
    Par défaut Affichage multiple de kml sous IE
    Bonjour, je me suis aidé de ce vieux topic pour faire une map où par l'intermédiaire de checkbox on peut afficher plusieurs kmz.

    Le problème est que sur IE (toutes versions ) j'ai une erreur de code sur cette ligne concernant la balise "null".

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    tKML[obj.id].kml.setMap( obj.checked ? oMap :null);
    Nom : kml.jpg
Affichages : 112
Taille : 30,5 Ko

    Mon code Javascript est le même que celui donné genéreursement par NoSmoking, avec une fonction d'autocomplétion en plus.
    Je l'affiche entier pour aider à comprendre l'origine du problème mais j'ai volontairement enlevé les liens vers les kmz qui ne doivent pas êtres rendus publiques.

    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
    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
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
     
        <script>	
    function initialize() {
     
    // chargement des couches kmz
    	var oData = [
      {
        'url': '',
        'tag': 'chk2'
      },
      {
        'url': '',
        'tag': 'chk1'
      },
      {
        'url': '',
        'tag': 'chk3'
      },
      {
        'url': '',
        'tag': 'chk4'
      },
      {
        'url': '',
        'tag': 'chk5'
      },
      {
        'url': '',
        'tag': 'chk6'
      },
      {
        'url': '',
        'tag': 'chk7'
      },
      {
        'url': '',
        'tag': 'chk8'
      }  
    ];
    // création de la carte
    var map = new google.maps.Map(document.getElementById('div_map'),{
        'zoom' : 11,
        'center' : new google.maps.LatLng(43.765144, 7.222824),
        'backgroundColor' : '#000',
        'streetViewControl' : true,
        'zoomControlOptions' : {
          'style' : google.maps.ZoomControlStyle.LARGE
        },
        'mapTypeId': google.maps.MapTypeId.ROAD,
      });
     
    // Fonction d'autocompletion  
    var input = document.getElementById('city_form_affinage');
    var autocomplete = new google.maps.places.Autocomplete(input);
     
    		autocomplete.bindTo('bounds', map);
     
    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
    		map: map,
            draggable:true		
      });
     
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    		if (!place.geometry) {
            // Inform the user that the place was not found and return.
            input.className = 'notfound';
            return;
            }
            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
            } else {
            map.setCenter(place.geometry.location);
            map.setZoom(16);  // Why 17? Because it looks good.
            }
    var image = new google.maps.MarkerImage(
            place.icon,
            new google.maps.Size(71, 71),
            new google.maps.Point(0, 0),
            new google.maps.Point(17, 34),
            new google.maps.Size(35, 35));
            marker.setIcon(image);
            marker.setPosition(place.geometry.location);
            });
     
    // affectation de la fonction affichage oui/non
    var tKML = [], oCheck;
    var i, nb = oData.length;
    for( i=0; i < nb; i++){
      oCheck = document.getElementById( oData[i].tag);
      if( oCheck){
        oCheck.value = oData[i].url;
        oCheck.onclick = function(){
           showKml(this);
        };
        oCheck.checked = false;
        showKml( oCheck);
      }
    }
    function showHideAll( flag){
      for( i in tKML){
        tKML[i].check.checked = flag;
        showKml( tKML[i].check);    
      }
    }
    function showKml( obj){
      if( !tKML[ obj.id]){
        tKML[obj.id] = {};
        tKML[obj.id].kml = new google.maps.KmlLayer( obj.value, {preserveViewport:true});
        tKML[obj.id].check = obj;
      }
      tKML[obj.id].kml.setMap( obj.checked ? map :null);
    }
    var oBtn = document.getElementById('btn_hide');
    oBtn.onclick = function(){
      showHideAll( false);
    };
    oBtn = document.getElementById('btn_show');
    oBtn.onclick = function(){
      showHideAll( true);
    };
    }
     
    google.maps.event.addDomListener(window, 'load', initialize);
     
        </script>
    Ensuite j'ai simplement inséré une balise div dans la partie <body>. Les propriétés de cette div sont gérés par un fichier .css.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="div_map"></div>
    Merci de m'aider à résoudre ce problème.

  2. #2
    Membre expert
    Avatar de Spartacusply
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Points : 3 275
    Points
    3 275
    Par défaut
    Essaye avec un "if" classique :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    if (obj.checked == true) {
          tKML[obj.id].kml.setMap(oMap );
    } else {
           tKML[obj.id].kml.setMap(null);
    }
    Vu que je suis pas convaincu, fait aussi un :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    console.log(tKML[obj.id].kml);
    pour bien voir ce que contiens ton objet.

  3. #3
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 089
    Points : 44 660
    Points
    44 660
    Par défaut
    Bonjour,
    Le problème est que sur IE (toutes versions ) j'ai une erreur de code sur cette ligne concernant la balise "null".
    hors du contexte global je doute de la ligne d'erreur, il n'y a pas de onclick dans la ligne que tu montres.

  4. #4
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2014
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Mars 2014
    Messages : 39
    Points : 26
    Points
    26
    Par défaut
    Merci de vous intéresser à mon probleme.

    Je débute avec javascript, pouvez vous m'aiguiller pour intégrer
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    if (obj.checked == true) {
          tKML[obj.id].kml.setMap(oMap );
    } else {
           tKML[obj.id].kml.setMap(null);
    à la fonction showkml:
    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
    function showKml( obj){
      if( !tKML[ obj.id]){
        tKML[obj.id] = {};
        tKML[obj.id].kml = new google.maps.KmlLayer( obj.value, {preserveViewport:true});
        tKML[obj.id].check = obj;
      }
      tKML[obj.id].kml.setMap( obj.checked ? map :null);
    }
    var oBtn = document.getElementById('btn_hide');
    oBtn.onclick = function(){
      showHideAll( false);
    };
    oBtn = document.getElementById('btn_show');
    oBtn.onclick = function(){
      showHideAll( true);
    };
    Pour info j'ai intégré les checkboxs dans une interface jquery, où dans une balise <li> je mets:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
            <li><a class="icon-neige"><input type="checkbox" id="chk6" />
            Stations ski et Espaces nordiques</a></li>

  5. #5
    Membre expert
    Avatar de Spartacusply
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2011
    Messages
    1 723
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 723
    Points : 3 275
    Points
    3 275
    Par défaut
    Remplace :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    tKML[obj.id].kml.setMap( obj.checked ? map :null);
    par mon bout de code.

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2014
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Mars 2014
    Messages : 39
    Points : 26
    Points
    26
    Par défaut
    J'avais essayé mais mes claques kmz ne s'affiche plus en cochant les checkbox après modification du code comme ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function showKml( obj){
      if( !tKML[ obj.id]){
        tKML[obj.id] = {};
        tKML[obj.id].kml = new google.maps.KmlLayer( obj.value, {preserveViewport:true});
        tKML[obj.id].check = obj;
      } 
      if (obj.checked == true) {
            tKML[obj.id].kml.setMap(oMap );
      } else {
           tKML[obj.id].kml.setMap(null);
      }
    }

  7. #7
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 089
    Points : 44 660
    Points
    44 660
    Par défaut
    Attention, plusieurs choses à dire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    tKML[obj.id].kml = new google.maps.KmlLayer( obj.value, {preserveViewport:true});
    d'après cette ligne il te faut que tes checkbox ait une value, seulement à aucun endroit tu n’initialise cette valeur d'autant que dans tes data les url sont vides.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    // chargement des couches kmz
    var oData = [
      {
        'url': '',
        'tag': 'chk2'
      },
    et dans l'init des checkbox on fait l'affectation
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    for( i=0; i < nb; i++){
      oCheck = document.getElementById( oData[i].tag);
      if( oCheck){
        oCheck.value = oData[i].url;
        oCheck.onclick = function(){
           showKml(this);
        };
        oCheck.checked = false;
        showKml( oCheck);
      }
    }
    donc ton tKML[obj.id].kml a de grande chance de ne pas être correct.




    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     if (obj.checked == true) {
            tKML[obj.id].kml.setMap(oMap );
      } else {
           tKML[obj.id].kml.setMap(null);
      }
    et
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    tKML[obj.id].kml.setMap( obj.checked ? oMap :null);
    c'est la même chose avec 2 écritures différentes, seulement ATTENTION oMap et map ne sont pas du tout la même variable.

  8. #8
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2014
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Mars 2014
    Messages : 39
    Points : 26
    Points
    26
    Par défaut
    J'ai justement dis un peu plus haut dans le post que j'ai volontairement enlevé les url des kmz pour ne pas les rendre publiques sur ce forum (elles contiennent des numéros de tel professionnels), mais bien evidement je teste ma page en local avec les url des kmz.

    Je suis donc toujours confronté à cette erreur javascript et à un affichage de la map aléatoire quand j'execute ma page sous IE 8.
    C'est très génant pour moi car au boulot on doit obligatoirement se servir de IE 8 (sur XP) pour naviguer sur mon site intranet.

    J'ai vraiment besoin de votre aide.
    Merci

  9. #9
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 089
    Points : 44 660
    Points
    44 660
    Par défaut
    Quand tu testes sur un autre navigateur (hors IE), as tu également l'erreur?

    Les URL sont-elles bien formées, il ne faudrait pas que ton KML soit null

    Un correction à faire dans le code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    // création de la carte
    var map = new google.maps.Map(document.getElementById('div_map'),{
        'zoom' : 11,
        'center' : new google.maps.LatLng(43.765144, 7.222824),
        'backgroundColor' : '#000',
        'streetViewControl' : true,
        'zoomControlOptions' : {
          'style' : google.maps.ZoomControlStyle.LARGE
        },
        'mapTypeId': google.maps.MapTypeId.ROAD      // SUPPRIMER la VIRGULE
      });
    un affichage de la map aléatoire...
    qu'entends tu par là, le KML s'affiche, la carte s'affiche?

  10. #10
    Nouveau membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2014
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Mars 2014
    Messages : 39
    Points : 26
    Points
    26
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Quand tu testes sur un autre navigateur (hors IE), as tu également l'erreur?
    Oui tout marche parfaitement sans erreur sous Firefox ou Opéra.

    Les URL sont-elles bien formées, il ne faudrait pas que ton KML soit null
    J'utilise Dropbox pour stocker les kmz et obtenir les liens, mais cela ne pose pas de probleme pour Firefox et Opéra qui m'affichent correctement les couches kmz.

    qu'entends tu par là, le KML s'affiche, la carte s'affiche?
    Sur IE8 la carte ne s'affiche pas du tout, alors que sous IE11 oui.

    Le problème et que j'ai besoin que mon site intranet fonctionne sous IE8 car au boulot ils sont toujours à XP (donc IE8).
    J'ai besoin par l'intermediaire de liens dans mon site intranet de naviguer sur le reseau de l'entreprise pour afficher le contenu de dossiers.
    Et il me semble que seul IE offre la possibilité d'afficher les dossiers comme Windows Explorer.

    Merci pour la correction du code je modifie ca de suite.

Discussions similaires

  1. affichage multiple: Fonctions disparues sous Vista?
    Par nodarp dans le forum Windows Vista
    Réponses: 5
    Dernier message: 11/12/2008, 14h31
  2. Affichage commentaires PL/SQL sous isqlplus
    Par PaulBilou dans le forum PL/SQL
    Réponses: 2
    Dernier message: 15/09/2005, 23h26
  3. Insertion multiple à base de sous requête SELECT
    Par drinkmilk dans le forum Langage SQL
    Réponses: 8
    Dernier message: 14/04/2005, 16h34
  4. affichage des pièces jointe sous outllook 2000
    Par darkbm dans le forum Autres Logiciels
    Réponses: 2
    Dernier message: 29/10/2003, 11h32
  5. Affichage d'une image sous linux
    Par Braim dans le forum x86 32-bits / 64-bits
    Réponses: 5
    Dernier message: 25/03/2003, 10h41

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