如何在移动设备（iphone safari）上使用 Google Maps InfoBox 制作 fancybox？答案

【问题标题】：How do I make fancybox work from Google Maps InfoBox on mobile (iphone safari)?如何在移动设备（iphone safari）上使用 Google Maps InfoBox 制作 fancybox？
【发布时间】：2014-11-09 08:12:57
【问题描述】：

我正在尝试创建一个包含一些文本信息的 Google Maps InfoBox，以及一个以 fancybox 打开的 google sphere。

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

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

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

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

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

2.然后我发现将 InfoBox 的 enableEventPropagation 选项设置为 true 使其工作 - 在桌面上但在 iphone safari 浏览器上不起作用。

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

大问题：如何在移动设备（iphone safari）上使用 Google Maps InfoBox 制作 fancybox？

【问题讨论】：

标签： javascript iphone google-maps fancybox infobox

【解决方案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');
    }
});

};

没有试过代码，但这应该给你我理论的概念。

【讨论】：