我正在尝试为我的传单标记自定义 html 输出。具体来说,我尝试为它们分配额外的数据属性,以根据从数据库中提取的 ID 触发引导模式,如下所示:
<div class="leaflet-marker-pane" data-toggle="modal" data-target="modal-<?php some id from php(); ?>"
但是我在如何附加附加 html 方面遇到了困难。
最佳答案
如果您的目标是在单击特定标记时触发特定模式,则有一种更简单的方法可以实现此目的,而不是像您现在提议的那样以声明方式执行。您只需使用 L.Marker
的 click
事件并调用您在初始化时已将其 ID 添加到标记的特定模态。一个例子:
// Create a new marker
new L.Marker([<?php echo $lat; ?>, <?php echo $lng; ?>], {
// Add id to marker as an option
id: <?php echo $id; ?>
// Attach to click event
}).on('click', function (e) {
// Call modal with id
$('#modal-' + this.options.id).modal('show');
// Add marker to map
}).addTo(map);
这里有更多关于通过 JS 而不是数据属性处理 bootstrap 模式的信息:
http://getbootstrap.com/javascript/#via-javascript
我什至想知道按照您建议的方式进行操作是否可行,因为 Bootstrap (我假设您正在使用 Bootstrap )将在初始化时扫描页面以查找当时标记上尚不存在的数据属性。如果您愿意,您可以尝试,您需要使用数据集属性将数据属性添加到标记的图标:
var marker = new L.Marker([<?php echo $lat; ?>, <?php echo $lng; ?>]).addTo(map);
marker._icon.dataset.toggle = 'modal';
marker._icon.dataset.target = 'modal-<?php echo $id; ?>';
关于javascript - 向传单标记添加附加标记?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35320902/