单击传单标记以在 fancybox 中打开图像

Question

我在点击传单地图中的标记时无法正确加载 fancybox 画廊时遇到了一些问题。我已经到了可以触发事件的阶段，但我仍然只能在框架内收到一条 fancybox 错误消息。今天我运行通过与 google 地图 api 相同的工作流程并得到了相同的结果，所以我在调用 fancybox 时一定有什么地方做错了。我搜索了又搜索，但在任何地方都找不到详细说明我的具体问题的答案，因为我是 JavaScript 的新手，这肯定是用户错误。我的代码如下：

//Array of locations
var locations = [
    ['Big Ben', 51.500625, -0.124624, 2, 'www.image1url.com/image1.jpg'],
    ['Tower Bridge', 51.506776, -0.074603, 1, 'www.image2url.com/image2.jpg'],
    ['London Eye', 51.503325, -0.119543, 3, 'www.image3url.com/image3.jpg']
];


//Calling the map
var map = L.map('map').setView([51.508529, -0.109949], 14);
mapLink =
    '<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 18,
    }).addTo(map);

//Looping through the array to create the markers
for (i = 0; i < locations.length; i++) {
    marker = new L.marker([locations[i][1], locations[i][2]], {
            title: (locations[i][0]),
        })
        .addTo(map)
        .on('click', function() {
            $.fancybox({
                href: locations[4],
                width: 1000,
                maxHeight: 666,
                fitToView: true,
                autoSize: false,
                type: 'iframe',
                padding: 0,
                openEffect: 'elastic',
                openSpeed: 150,
                aspectRatio: true,
                closeEffect: 'elastic',
                closeSpeed: 150,
                closeClick: true,
                iframe: {
                    scrolling: 'no'
                },
                preload: true
            });
        });
}

提前感谢您的帮助

编辑我在这里添加了一个 JSFiddle：Fancybox on Leaflet Marker

Answer 1

很可能，您的错误来自这行代码：

href: locations[4]

链接位于嵌套数组中，要访问它们，您必须使用：

href: locations[i][4]

更新

好的，根据您的 JSFiddle，我找到了解决方案。您必须创建一个图层组并将标记存储在其中。然后，要访问位置数组的第 4 个属性，您必须确定标记在 layerGroup 数组中的位置。

//create a layergroup to store the markers inside it
var group = L.layerGroup().addTo(map)   

for (i = 0; i < locations.length; i++) {
        marker = new L.marker([locations[i][1], locations[i][2]], {
                title: (locations[i][0]),
                opacity: 1
            })
            .addTo(group)    //add the markers to the group
            marker.on('click', function() {
                markerArray = group.getLayers();      //get an array with all the markers

                //see which marker from the group was clicked and store the value for later use 
                position = markerArray.indexOf(group.getLayer(this._leaflet_id));
                $.fancybox({
                    //acccess the locations array using the previously stored value
                    href: locations[position][4],
                    width: 1000,
                    maxHeight: 666,
                    fitToView: true,
                    autoSize: false,
                    type: 'iframe',
                    padding: 0,
                    openEffect: 'elastic',
                    openSpeed: 150,
                    aspectRatio: true,
                    closeEffect: 'elastic',
                    closeSpeed: 150,
                    closeClick: true,
                    iframe: {
                        scrolling: 'no'
                    },
                    preload: true
                });
            });
    }

这是一个更新的 JSFiddle：http://jsfiddle.net/pufanalexandru/8mLxm820/2/

单击传单标记以在 fancybox 中打开图像

Click on Leaflet marker to open image in fancybox

javascript

jquery

fancybox

leaflet