Question

我用Leaflet制作了一张地图。这张地图由点组成;当用户点击某个点时，它会打开一个弹出窗口，其中包含一个信息和一个用于在新页面中打开表单的链接。这很不错。
现在我希望链接在iframe中打开，而不是在新页面中打开。我想用FancyBox。

为此，我将Fancybox链接放在我的html页面中（我有JQuery的1.9.1版本）：

<link rel="stylesheet" href="/maquette/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<script type="text/javascript" src="/maquette/biblio/jquery.fancybox-1.3.4.pack.js"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $("#various3").fancybox({
            'width'         : '95%',
            'height'        : '95%',
            'autoScale'     : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'          : 'iframe'
        });

        });
</script>

html文件调用一个JS文件，我在其中构建我的地图。我将弹出窗口配置为：

   var pl = L.geoJson(ptslum, {
    pointToLayer: function (feature, latLng) {
      return new L.Marker(latLng, {
        icon: new myIcon({
          iconUrl: '/maquette/css/iconPL2.png'
        })
      }).bindPopup("<b><center><FONT color = 999999> La référence du point lumineux sélectionné est </b>" + "<b>" + feature.properties.pl_ref_sdeer + "</b></FONT><br><br>" 
        + "<a class = \"iframe\" href = \"form/declapanne.php?id=" + feature.properties.pl_ref_sdeer + "\"> Cliquer pour déclarer la panne</a></center> "                       
        );
  }
});

但没有任何反应：表格始终在新页面中。

您知道如何在Leaflet和FancyBox之间建立连接吗？

谢谢！

Answer 1

当弹出窗口打开时弹出窗口的内容会被添加到DOM中，弹出窗口关闭时会被删除。因此，如果您需要对弹出窗口中的内容执行某些操作，则需要在弹出窗口打开时执行此操作。您可以收听popupopen实例触发的L.Map事件：

var map = new L.Map('leaflet')
    .setView([0, 0], 0);

var marker = new L.Marker([0, 0])
    .bindPopup('<div id="foo"></div')
    .addTo(map);

document.getElementById('foo'); // Nope

map.on('popupopen', function () {
    document.getElementById('foo') // Yup
})

map.on('popupclose', function () {
    document.getElementById('foo') // Nope
})

因此，在使用Fancybox时，您只能在弹出窗口打开后进行初始化，并给出以下弹出内容：

<a id="single_image" href="image_big.jpg">
    <img src="image_small.jpg" alt=""/>
</a>

您可以在popupopen上初始化Fancybox，如下所示：

map.on('popupclose', function () {
    $("a#single_image").fancybox();
})

单击Leaflet Popup

1 个答案: