Question

我在点击传单地图中的标记时正确加载fancybox图库时遇到一些问题。我已经到了可以触发事件的阶段，但我只是在框架内得到了一个fancybox错误消息。我今天使用谷歌地图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/

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

1 个答案: