多個異步Google地圖onclick

我想加載不同的Google地圖，具體取決於他們點擊的鏈接。事情是這樣的：多個異步Google地圖onclick

首先，用戶點擊一個鏈接像...

<a class="loadMap" href="?map&center=44.370987,-85.407715">load map 1</a>

......或者......

<a class="loadMap" href="?map&center=23.4567,-80.234523">load map 2</a>

的谷歌地圖API，然後異步加載（如果它尚未被加載）。該地圖中心從鏈接的href採取點擊，然後在地圖上是正確的被點擊（jQuery中類似$（本）。經過（showMap）;）的鏈接下方顯示

我我找到了load a single map asynchronously的示例，但我無法弄清楚如何傳遞不同的地圖參數來加載不同的地圖，並將其與相應的點擊鏈接相關聯。

來源

2012-04-05 Michael

澄清，鏈接是動態的（用戶可以選擇中心）還是靜態的？ – 2012-04-05 16:40:14

每個鏈接對不同的地圖中心都包含不同的參數。 – Michael 2012-04-05 16:49:04

演示：http://bit.ly/HiIWxd

 function initialize(map_id, lat, lng) { 
      var myOptions = { 
       zoom : 8, 
       center : new google.maps.LatLng(lat, lng), 
       mapTypeId : google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById(map_id), myOptions); 
     } 

     $(function() { 
      $('.loadMap').click(function(e) { 
       e.preventDefault(); 
       var cooordinates = this.hash.split('=')[1].split(','); 
       var lat = cooordinates[0]; 
       var lng = cooordinates[1]; 
       var map = this.id + '-map'; 

       if($('#maps_canvas #' + map).length === 0) { 
        $('<div class="map_style" id="' + map + '">').appendTo('#maps_canvas'); 
        initialize(map, lat, lng); 
       } 
      }); 
     });

注：看到演示源爲完整的代碼

來源

2012-04-05 16:27:42

這是一個開始（我會玩它），但我需要它動態地在現有頁面上創建一個新的地圖。所以用戶點擊一個鏈接，那個地圖就在他們點擊的鏈接下面創建（沒有頁面刷新）。如果他們點擊多個鏈接，他們可能會同時查看多個地圖。 – Michael 2012-04-05 16:44:37

@Michael：多個異步與你需要什麼沒有關係，看看我已經更新它的演示和源代碼。 – 2012-04-05 17:29:35

是的！謝謝！！這正是我需要的。爲了讓地圖準確地插入我需要的地方，我必須稍微玩一下，但我可以弄清楚。 – Michael 2012-04-05 18:39:03

多個異步Google地圖onclick

回答

相關問題