[英]Show image in Leaflet popup not working
I am trying to show an image in the a popup on a Leaflet map following this example here. 我试图按照此处的示例在传单地图上的弹出窗口中显示图像。 I think I have the format set up the same but am not sure why it isn't showing.
我想我已经设置了相同的格式,但是不确定为什么它没有显示。
What am I doing wrong? 我究竟做错了什么?
Example I am following: 我下面的示例:
marker1.bindPopup( "<img src=" + icon_url + "/> Current temperature in " + location + " is: " + temp_f)
HTML: 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: 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: 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 + "/>");
});
In the example, the icon_url
is not a comment for you to paste the path to your image, but an example of variable which value is a string representing that path. 在此示例中,
icon_url
不是将路径粘贴到图像的注释,而是一个变量示例,其值是表示该路径的字符串。
Therefore in your case you would do one of the following: 因此,您需要执行以下操作之一:
// 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'/>");
Or: 要么:
// 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 + "/>");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.