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

单击传单地图中的标记时，我在正确加载fancybox图库时遇到一些问题。我已经到了可以触发事件的阶段，但我只能在帧内获取fancybox错误消息。今天我用google maps 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
            });
        });
}

//位置数组
变量位置=[
[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']
];
//调用地图
var map=L.map（'map'）.setView（[51.508529，-0.109949]，14）；
地图链接=
'';
蒂莱耶(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：'©；'+mapLink+'Contributors'，
maxZoom:18，
}).addTo（地图）；
//在数组中循环以创建标记
对于（i=0；i

提前谢谢你的帮助

---

编辑我在这里添加了一个JSFIDLE:

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

href: locations[4]

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

href: locations[i][4]

更新

好的，基于您的JSFIDLE，我有了一个解决方案。您必须创建一个图层组并将标记存储在其中。然后，要访问locations数组的第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
                });
            });
    }

//创建一个图层组以在其中存储标记
var group=L.layerGroup（）.addTo（映射）
对于（i=0；i

---

这里有一个更新的JSFIDLE:

感谢您的响应，当我添加[I]时，fancybox将停止处理单击事件，即没有出现任何框，鼠标单击似乎什么也不做。我用这个答案找到了我现在的位置，所以我的问题可能是因为没有正确地将它从谷歌地图api转换成传单？我在这里添加了它。该示例使用的是我的网站上的不同数组和实际图像，而不是上面的一般伦敦示例，但除此之外，代码应该是sameThanks，这似乎工作得很好，因此我已将您的响应标记为应答，这是基于上述代码的附加请求。如何调整它以允许下一个和上一个箭头在每个图像中循环。虽然每个图像仅与一个标记关联，但理想情况下，单击任何单个标记都可以启动显示所有关联照片的图库，理想情况下，所选标记会在暗淡的背景中发生变化。虽然我不知道如何做第二部分，但我认为第一部分可以通过在fancybox代码中添加一些内容来实现，告诉它单击下一个箭头打开此窗口。_传单_id+1，但我似乎无法获得任何工作