在传单标记中添加额外的标记?

时间:2016-02-10 16:38:46

标签: javascript leaflet

我正在尝试为我的传单标记自定义html输出。具体来说,我正在尝试为它们分配额外的数据属性,以根据从数据库中提取的ID触发引导模式,如下所示:

<div class="leaflet-marker-pane" data-toggle="modal" data-target="modal-<?php some id from php(); ?>"

但我正在努力解决如何附加额外的HTML。

1 个答案:

答案 0 :(得分:1)

如果您的目标是在点击特定标记时触发特定模式,则有一种更容易的方法,而不是像您现在提出的那样明确地进行。您可以使用click的{​​{1}}事件,并在初始化时调用您已添加到标记中的ID的特定模式。一个例子:

L.Marker

这里有更多关于通过JS而不是数据属性来处理bootstrap的模态:

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

我甚至想知道是否按照你建议的方式去做是因为bootstrap(我假设你正在使用bootstrap)将在初始化时扫描页面,当时数据属性尚未出现在标记上。您可以尝试,如果需要,您需要使用dataset属性将数据属性添加到标记的图标:

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