1
votes

La carte de la brochure n'est pas complètement chargée lorsque j'ouvre l'élément d'inspection, il se chargera complètement

Voici la fonction qui appelle l'événement onclick

<div id="detail_content" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('detail_content').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <div class="modal-info">
          <div id="hrymap">
    </div>
        </div>
      </div>
    </div>
  </div>
</div>

Voici le div modal que le div de carte a créé

function drawMapFromWms(latt,longt){    

  document.getElementById('hrymap').innerHTML = "";      

     document.getElementById('hrymap').innerHTML = "<div id='map'></div>";
      map = L.map('map').setView([29.0,76.776695], 8);   


                 L.tileLayer.wms("http://example.com", {
             layers:'india3',

       format: 'image/png',
        transparent: true,
       attribution:"dummy"

    }).addTo(map);

          L.tileLayer.wms("http://example.com", {
             layers:'hrcm_roads',

       format: 'image/png',
        transparent: true,
       attribution:"dummy"

    }).addTo(map);

     var marker = L.marker([latt,longt]).addTo(map);

     $("#detail_content").css({'display':'block'});


  }

Et enfin la fonction est appel

Le problème est que lorsque je clique sur le bouton, la carte est chargée partiellement comme l'image ci-dessous

et après avoir inspecté l'élément, il sera complètement chargé comme l'image ci-dessous.

javascript user-interface maps leaflet inspect

1 commentaires

Copie possible de Pourquoi ma carte ne s'affiche-t-elle pas complètement?

3 Réponses :

0
votes

Vous n'initialisez pas correctement la carte. Vous ne définissez jamais le centre. Passez un argument d'options de carte comme deuxième argument. Doit être comme:

$("<div id='map'></div>").appendTo('#hrymap').css({width:'868px', height:'650px'});

Voici la documentation .

Après avoir lu votre commentaire, je pense que c'est parce que le CSS associé à l'attribut HTML class remplace votre CSS moins spécifique. Personnellement, j'utiliserais simplement des CSS plus spécifiques, comme:

document.getElementById('hrymap').innerHTML = "<div id='map'></div>";

au lieu de

document.getElementById('hrymap').innerHTML = "";

Au fait p >

#map{
  width:868px; height:650px;
}

div.modal-info>div#hrymap>div#map.leaflet-container{
  width:868px; height:650px;
}

sont tous deux des attributions. Pourquoi le premier? Et pourquoi pas $ ('# hrymap'). Html ("

") ? Lorsque vous utilisez jQuery, utilisez-le simplement.

Si la méthode CSS ne fonctionne pas, essayez:

var map = L.map('map', {center:[29.0, 76.776695], zoom:8});

Gardez à l'esprit que lorsque vous utilisez .appendTo () , les méthodes jQuery suivantes affecteront le sélecteur jQuery avant .appendTo () , tandis que les méthodes jQuery suivant append () affecteront le append () .

Bien sûr, encore une fois, vous devez créer la structure HTML autant que vous le pouvez, sans utiliser JavaScript. Ne faites les choses à la volée que lorsque vous en avez besoin.

4 commentaires

J'ai fait la même chose mais ça ne marche pas toujours le même problème. Carte chargée complètement lorsque j'ouvre l'élément inspect

Dans mon cas, la carte est chargée sur le modal bootstrap peut-être que cela crée un problème

quand j'ai essayé d'ajouter appendTo, alors il me donne un identifiant d'erreur commence immédiatement après le littéral numérique

J'ai oublié les citations. Si vous mettez cela dans une fonction qui est appelée sur un événement utilisateur, vous pouvez utiliser $ ('# hrymap'). Html ('') en premier, donc vous n'ajoutez pas de multiples du même div, car .appendTo et .append sont comme + = .

0
votes

Comme elle est créée à la volée, votre carte peut ne pas connaître la taille de son conteneur.

Essayez

map.invalidateSize();

2 commentaires

Pouvez-vous réorganiser votre code afin que votre élément de carte soit créé lors du chargement de la page? cela fonctionnera ( yafred.github.io/leaflet-tests / 20161209-carte-dans-une-boîte de dialogue )

ne fonctionne pas dans cette méthode également. boîte de dialogue chargée parfaitement mais la largeur de la hauteur de la carte n'est pas complètement chargée

0
votes

setTimeout (function () {map.invalidateSize (true)}, 300);

0 commentaires