当前位置：文江博客话题详情

从 Google 地图中的事件侦听器而不是默认信息窗口调用 Fancybox

发布于 2024-10-14 18:01:24 字数 645 浏览 3 评论 0原文

我希望用 Fancybox 覆盖层替换默认的 Google Maps API InfoWindow。

版本

Google Maps API 3.0

目标

用 Fancybox 弹出窗口替换默认的信息窗口

用例

Google 地图以全屏方式加载（100% x 100 %)
标记被放置在地图上
用户单击标记并显示一个覆盖地图的 Fancybox 弹出窗口
用户单击 Fancybox 右上角的“X”将其关闭

我不知道如何操作最好解决这个问题。使用 addListener 事件处理程序调用 Fancybox（将标记作为参数传递）是否最简单？如果是这样，你们会如何建议这样做？

例如：

google.maps.event.addListener(marker, 'click', function(){
    // Call Fancybox, but how?
});

提前谢谢您，

格雷厄姆·肯尼迪

原文

I'm looking to replace the default Google Maps API InfoWindow with a Fancybox overlay.

Version

Google Maps API 3.0

Goal

Replace the default Infowindow with a Fancybox popup

Use Case

Google map is loaded up in full screen (100% by 100%)
Markers are placed onto the map
User clicks on a marker and is shown a Fancybox popup that overlays the map
User clicks on "X" in the top right hand corner of the Fancybox to close it

I'm at a loss as to how best to tackle this. Is it easiest to call Fancybox using the addListener event handler, passing in the marker as a parameter? If so, how would any of you recommend doing this?

For example:

google.maps.event.addListener(marker, 'click', function(){
    // Call Fancybox, but how?
});

Thank you in advance,

Graham Kennedy

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

離人涙 2024-10-21 18:01:24

我发现最好的方法是使用 Fancybox 的 href 方法手动传递内容。对我来说就像一个魅力。

function addMarker(data) {

    // build the window contents
    var contentForBox = data;

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

        $.fancybox({
            href: contentForBox
            // other options
        });


    });
}

I've found that the best way to go about this is to pass in your content manually with Fancybox's href method. Works like a charm for me.

function addMarker(data) {

    // build the window contents
    var contentForBox = data;

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

        $.fancybox({
            href: contentForBox
            // other options
        });


    });
}

回复收藏 0 原文

~没有更多了~