向传单标记添加其他标记

Adding additional markup to leaflet marker?

本文关键字：其他 添加 单标记      更新时间：2023-09-26

我正在尝试为我的传单标记自定义 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而不是数据属性处理引导模式的更多信息：

http://getbootstrap.com/javascript/#via-javascript

我

什至想知道按照您建议的方式进行操作是否会起作用，因为引导程序（我假设您使用的是引导程序）将在初始化时扫描页面以查找当时标记上尚不存在的数据属性。如果需要，可以尝试，需要使用数据集属性将数据属性添加到标记的图标中：

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; ?>';
相关文章：