2015-11-01 3 views
0

Je suis en train d'obtenir une image dans la fenêtre popup suivant: this example here. Je pense avoir le même format mais je ne sais pas pourquoi elle n'est pas affichée.Afficher l'image dans la popup popup ne fonctionne pas

Qu'est-ce que je fais mal?

Exemple Je suivais:

marker1.bindPopup("<img src=" + icon_url + "/> Current temperature in " + location + " is: " + temp_f) 

HTML:

<body> 
    <div id="wrapper"> 
     <div id="content"> 
      <h1>DC Area Parks</h1> 
      <p>Parks in the DC area that I have visited since creating this page.</p> 
      <br> 
      <div id="map"></div> 
     </div> 
    </div> 
</body> 

CSS:

#wrapper { 
    padding-right: 10px; 
    padding-left: 10px; 
    margin: 0 auto; 
    width: 80%; 
    border-right: 1px solid black; 
    border-left: 1px solid black; 
    height: 100vh; 
    box-shadow: 5px 5px 10px 5px gray; 
    margin-top: none; 
    padding-top: none; 
    text-align: center; 
} 

#map { 
    height: 300px; 
    width: 80%; 
    border: 1px solid black; 
    box-shadow: 2px 2px 4px 1px black; 
    margin: 0 auto; 
} 

JavaScript:

$(document).ready(function(){ 
    console.log("The JavaScript has loaded"); 
    var map = L.map('map',{ center: [38.907192, -77.036871], zoom: 9}); 
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map); 
    //Potomac Overlook Park 
    var potomacOverlookPark = L.marker([38.990175, -77.165271]).addTo(map); 
    potomacOverlookPark.bindPopup("Potomac Overlook Park <br> The second line <br> <img src=" + images/PotOvePar.jpg + "/>"); 
}); 

Répondre

1

Dans l'exemple, le icon_url n'est pas un commentaire pour vous de coller le chemin d'accès à votre image, mais un exemple de variable dont la valeur est une chaîne représentant ce chemin.

Par conséquent, dans votre cas, vous effectuez l'une des opérations suivantes:

// Directly write your image src in the popup html string. 
potomacOverlookPark.bindPopup("Potomac Overlook Park <br> The second line <br> <img src='images/PotOvePar.jpg'/>"); 

Ou:

// Assign the path to a variable. Then it looks closer to your example: 
var icon_url = "images/PotOvePar.jpg"; 
potomacOverlookPark.bindPopup("Potomac Overlook Park <br> The second line <br> <img src=" + icon_url + "/>");