javascript - 在传单弹出窗口中显示图像不起作用

标签 javascript image popup leaflet

我正在尝试在this example here.之后的传单 map 上的弹出窗口中显示图像我认为我的格式设置相同,但不确定为什么它没有显示。

我做错了什么?

我正在关注的示例:

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 + "/>");
});

最佳答案

在示例中,icon_url 不是供您粘贴图像路径的注释,而是一个变量示例,其值是表示该路径的字符串。

因此,根据您的情况,您将执行以下操作之一:

// 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'/>");

或者:

// 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 + "/>");

关于javascript - 在传单弹出窗口中显示图像不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33468534/

相关文章:

javascript - 将数组转换为对象数组

php - TinyMCE:打包所有文件而不是动态加载它们......可能吗?

javascript - 在下拉菜单中选择值显示隐藏的输入字段

css - 包装背景图像在顶部被截断

vb.net - 如何从 ShowDialog 窗口返回一个值?

javascript - 删除 Mailchimp 弹出窗口的 cookie

javascript - 如何在javascript中正确实现滑动动画?

python - 在 python 3.x 中创建、修改和保存图像

php - 使用mpdf在php中插入pdf格式的图像

javascript - 使用多个交互式弹出窗口的含义