将 Fancybox 与 Google 静态地图一起使用答案

【问题标题】：Using Fancybox with Google Static Maps将 Fancybox 与 Google 静态地图一起使用
【发布时间】：2010-04-04 03:18:49
【问题描述】：

设置

我在一个页面上有多个链接，类为location_link
每个链接rel 属性等于一个城市状态组合（即Omaha, NE）
加载页面后，JavaScript 函数会循环遍历所有 location_link 项目并使用 jQuery 将 click 事件绑定到它们。
此点击事件触发对 Fancybox 构造函数的调用，该构造函数应该显示链接所关联位置的 Google 地图

问题：

每当我单击“位置链接”之一时，都会收到以下错误消息：

无法加载请求的内容。请稍后再试。

我已经编写的代码：

function setUpLocationLinks() {
    locationLinks = $("a.location_link");
    locationLinks.click(
        function() {
            var me = $(this);
            console.log(me.attr("href"));
            $.fancybox(
                {
                    "showCloseButton" : true,
                    "hideOnContentClick" : true,
                    "titlePosition"  : "inside",
                    "title" : me.attr("rel"),
                    "type" : "image"
                }
            )
            return false;
        }
    );
}

我已经完成的研究：

Google 静态地图 API 不再需要 API 密钥。以下来自Google Static Maps API Page

注意：Google 静态地图 API 不再需要地图 API 密钥！（Google Maps API Premier 客户应改为使用将发送给您的新加密密钥签署他们的 URL。有关详细信息，请参阅 Premier 文档。）

我使用的 The Image URL 确实解析并拉回了我需要的数据
当我将上述 URL 放入标准标记时，地图显示得很好。
我想完成此操作，而不必创建某种虚拟标记，我会不断切换 src 属性。

希望这些信息对您有所帮助。如果您有任何其他问题，请告诉我。

【问题讨论】：

标签： javascript fancybox google-static-maps

【解决方案1】：

这就是我想出的。它使用一个空的标记，但它可以工作。我很乐意看到有人提出更优雅的解决方案。

function setUpLocationLinks() {
    var locationLinks = $("a.location_link");
    var mapImage = $("#map_image");
    var mapImageContainer = $("#map_image_container");
    var mapFancybox = function() {
        $.fancybox.hideActivity();
        $.fancybox(
            {
                "showCloseButton" : true,
                "hideOnContentClick" : true,
                "titlePosition"  : "inside",
                "content" : mapImageContainer.html()
            }
        );
    }
    locationLinks.click(
        function() {
            var clickedLink = $(this);
            $.fancybox.showActivity();
            mapImage.attr("src", clickedLink.attr("href")).load(
                function() {
                    mapFancybox();
                }
            );
            if(mapImage.complete) {
                mapImage.triggerHandler("load");
            }
            return false;
        }
    );
}

【讨论】：