使用的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與谷歌靜態地圖

回答

相關問題