使用的fancybox与谷歌静态地图

我和班上的页面上的多个链接location_link
各个环节rel属性等于一个城市国家组合（即Omaha, NE）
加载页面后，JavaScript函数会循环遍历所有location_link项目，并使用jQuery将click事件绑定到它们。
该点击事件触发到是为了显示位置的谷歌地图链接与

该问题相关的的fancybox构造函数的调用：

每当我点击的一个“位置链接”，我收到以下错误消息：

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

代码我已经写：

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

研究，我已经做了：

的谷歌静态地图API不再需要API密钥。以下是从Google Static Maps API Page

注：谷歌静态地图API不再需要Google Maps API密钥！（谷歌地图API Premier客户应使用将发送到您的新的加密密钥，而不是签上自己的网址，查看文档总理的更多信息。）

的The Image URL我使用并解决和拉回我需要的数据
当我把上面提到的URL放到一个标准的<img>标记中时，地图显示得很好。
我想在不需要创建某种假人的情况下关闭此标记<img>标记我不断地切换src属性。

希望你会发现这个信息很有帮助。如果您有任何其他问题，请告诉我。

来源

2010-04-04 Levi Hackwith

这是我想出来的。它使用了一个空的<img>标签，但它有效。我很乐意看到有人提出更优雅的解决方案。

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

来源

2010-04-05 00:07:56

使用的fancybox与谷歌静态地图

回答

相关问题