1

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

我的第一个解决方案是使用 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？

4

1 回答 1

0

设置内容时，将其设置为：

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');
    }
});

};

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

于 2014-09-17T09:35:46.560 回答