0

我有一个谷歌地图（v3），我在其中放置了几个标记，并且希望能够单击标记并拉出一个 Fancybox iFrame。我不知道如何将 URL 从标记拉到 Fancybox。

我可以看到 Fancybox 正在触发 - 弹出窗口会短暂出现，然后链接会作为新页面拉到当前页面的顶部。

以下是相关代码的片段：

 var sites = [
['Mount Evans', 39.58108, -105.63535, 4, 'www.myurl-1.com'],
['Irving Homestead', 40.315939, -105.440630, 2, 'wwww.myurl-2.com'],
['Badlands National Park', 43.785890, -101.90175, 1, 'www.myurl-3.com'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'www.myurl-4.com']
];

function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            url: sites[4]
        });


    google.maps.event.addListener(marker, 'click', function() {     
        $.fancybox({
            href : function() {
                    window.location.href = marker.url;
              },
            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
        });
    });

    }

}
4

2 回答 2

0

还要检查这篇文章 Open DIV as fancy box Google Map Marker

 $("a#fancyBoxLink").fancybox({
        'href'   : '#myDivID',
        'titleShow'  : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });

带有 Google 地图标记的 Fancybox

于 2014-01-22T05:25:45.327 回答
0

这是我用来解决这个问题的最终代码：

    var sites = [
    ['Mount Evans', 39.58108, -105.63535, 4, 'www.myurl-1.com'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'wwww.myurl-2.com'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'www.myurl-3.com'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'www.myurl-4.com']
    ];

    function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            href: sites[4]
        });


    google.maps.event.addListener(marker, 'click', function() {    
        $.fancybox({
            href : sites[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
        });
    });

    }

}

只是在标记选项中引用了 href 并在 fancybox 调用中引用。

于 2013-08-02T16:57:35.820 回答