Question

设置

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

问题：

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

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

代码我已经写过：

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 Static Map API不再需要API密钥。以下内容来自Google Static Maps API Page

注意：Google Static Maps API不再需要Maps API密钥！（Google Maps API Premier客户应使用将发送给您的新加密密钥对其网址进行签名。有关详细信息，请参阅Premier文档。）

我正在使用的The Image URL确实解析并撤回了我需要的数据
当我将上述网址放入标准＆lt; img＆gt;时标签，地图显示就好了。
我想把它拉下来而不必创建某种虚拟＆lt; img＆gt;标记我不断切换src属性。

希望您会发现此信息有用。如果您有任何其他问题，请与我们联系。

Answer 1

这就是我想出的。它使用空的＆lt; img＆gt;标签，但它的工作原理。我很乐意看到有人提出更优雅的解决方案。

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

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

1 个答案: