javascript - 如何使 fancybox 在移动设备(iphone safari)上的 Google map InfoBox 中工作？

Question

我正在尝试创建一个包含一些文本信息的 Google map 信息框以及一个使用 fancybox 打开的 google sphere。

我的第一个解决方案是使用 Google Maps InfoWindow，它确实有效 - fancybox iframe 是从桌面和移动设备上的 InfoWindow 打开的。

-这是我使用 InfoWindow 的桌面和移动设备的工作解决方案:http://spoti.lv/infowindow/

我需要自定义 InfoWindow，因此我找到了 InfoBox，它的工作方式与此类似，但具有更多自定义选项。

问题是 InfoBox 的行为与原始 InfoWindow 不同。

1.起初，fancybox根本不起作用，它只是将我定向到href中指定的url。

2.然后我发现将 In​​foBox 的 enableEventPropagation 选项设置为 true 可以使其工作 - 在桌面上但不能在 iphone safari 浏览器上工作。

-这是我仅使用 InfoBox 的桌面工作解决方案:http://spoti.lv/infobox/

大问题:如何在移动设备(iPhone safari)上的 Google Maps InfoBox 中使用 fancybox？

Answer 1

设置内容时，将其设置为如下所示:

var content = '<div id="gWindow"><a data-apply="fancybox.iframe fancybox-effects-b" data-origin="iframe.html?panoid='+ pano +'" title="' + name + ' - ' + city + ', ' + street + '" href="javascript:;"><div id="gImgWrap"><img src="http://maps.googleapis.com/maps/api/streetview?size=300x200&fov=120&heading=350&pitch=-2&pano=' + pano + '&sensor=false" /></div></a><div id="gWrap"><h3>' + name + '</h3><span id="gCity">' + city + '</span>, ' + street + '<br /><span id="gRest">' + 'Darba laiks: ' + time + '<br />' + 'Cena: ' + price + ' EUR' + '<br /><a href="http://' + web + '" target="_blank">' + web + '</a></span></div></div>';

然后在定义事件时扩展它，这样就不会重叠

google.maps.event.addListener(marker, 'click', (function(marker, content) {

        return function() {

            infobox.setContent(content);

            infobox.open(map, marker);

            resetMapClickEvents();

        }

    })(marker, content));

最后添加重置命令

var resetMapClickEventsIndex = 0, resetMapClickEvents = function(){
// because you reset event after ever info box created,
// make sure it gets recreted when reupdated
// and does not recreate if fancy is triggered
resetMapClickEventsIndex++;
$('[data-origin]').unbind().bind('click', function(){
    if($(this).data('index') !== resetMapClickEventsIndex){
        $(this).data('index', resetMapClickEventsIndex)
        $(this).fancybox({
            type: 'iframe',
            href: $(this).data('origin'),
            modal: true,
            transitionIn: 'elastic',
            transitionOut: 'elastic',
            speedIn: 600, 
            speedOut: 200
        });
        $(this).trigger('click');
    }
});

};

还没有尝试过代码，但这应该能让你了解我的理论的概念。