javascript - How to insert a map into a popover - bootstrap
问题描述
I need to have a popover which can present a map inside its body. I did this basic example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<a href="#" data-toggle="popover">Toggle popover</a>
</div>
<script>
let script = `
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
<\/script>`;
console.log(script);
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
title: 'A nice map inside a popover!',
content: "<div id='map' style='background: gray;'></div>" + script,
html: true
});
});
</script>
</body>
</html>
It sends html content which contains a div and script for the leaflet map. It doesn't work. I am not sure this approach would work out and maybe you know a better way to have a map once a table cell or any other element is clicked.
解决方案
Please check following code snippet:
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
title: 'A nice map inside a popover!',
content: "<div id='map' style='background: gray;'></div>",
html: true
});
$("[data-toggle=popover]").on('shown.bs.popover', function () {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
});
});
#map{
height:300px;
width:300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<div class="container">
<h3>Popover Example</h3>
<a href="#" data-toggle="popover">Toggle popover</a>
</div>
Hope this will helps you.
推荐阅读
- pyspark - 使用 Pyspark 将格式 MMM d yyyy hh:mm AM/PM 的字符串转换为日期
- python - 从 python 运行管道 bash commnads
- javascript - 将多个 PHP 变量发送到 javascript 函数
- java - 当设备与 USB 端口连接时如何通知 android 应用程序
- r - 获取列表中不包含任何 NA 的元素的索引
- c# - DisallowNull 用于方法参数
- c# - 在不使用进程事件的情况下确定文件何时不再使用
- javascript - useState 不保存数据
- paypal - 如何从 Paypal 授权页面中删除稍后付款
- jackrabbit - Moqui 是否支持在 Apache Jackrabbit 中保存内容/查看内容历史记录/结帐/签入