如何加載谷歌地圖使用jQuery的錨點擊

我想加載谷歌地圖的錨點擊。以下是詳細信息。如何加載谷歌地圖使用jQuery的錨點擊

我的Index.aspx頁面，在這裏我有一個錨標記和一個div 「divLoadMap」

<a class="loadMap" href="map.aspx">Load Map</a> 
<div id="divLoadMap"> 
</div>

而且我有map.aspx具有地圖的細節。下面是代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="_LANGUAGE" xml:lang="_LANGUAGE"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Simple Jquery CSS Tabs and V3 Google Maps</title> 

    <script type="text/javascript" src="/common/js/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript" language="javascript"> 

    $(document).ready(function() { 

     function initialize() 
     {  
      var latlng = new google.maps.LatLng(25.294371, 55.332642);  
      var myOptions = {  zoom: 8,  center: latlng,  mapTypeId: google.maps.MapTypeId.ROADMAP  };  
      var map = new google.maps.Map(document.getElementById("map_canvas"),   myOptions); 


      var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       title: 'Dubai' 
      }); 
      var contentString = 'Dubai'; 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentString, 
       maxWidth: 50 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map,marker); 
      }); 

     } 

    initialize(); 

    }); 

    </script> 

</head> 
<body> 
    <form id="mapform" > 
    <div id="map_canvas" style="width: 500px; height: 500px"> 
    </div> 
    </form> 
</body> 
</html>

現在我想加載錨標記的點擊這是目前在的Index.aspx此地圖。

請建議!!將不勝感激，如果可以得到上述問題的代碼示例。

來源

2011-10-13 Manoj Singh

你的問題不清楚 - 如果你點擊錨，你會採取map.aspx，將加載在地圖上。你可以說得更詳細點嗎？ – duncan

在錨點上，它會在疊加窗口中打開map.aspx，即在同一頁面上的一個燈箱。 –

我想到了下面的方法。

聲明一個div id爲 'GoogleMapContainer'
默認的顯示讓它：無。
這個div裏面，聲明iframe和分配這個iframe來的Index.aspx頁的SRC屬性。
現在的onclick錨標記調用JavaScript函數，它在內部會調用查詢模式對話框上面宣佈股利。
這將導致在其中包含谷歌地圖的彈出窗口。

<div id="GoogleMapContainer" title="Google Map Container" style="display: none;"> 
     <iframe id="frameGoogleMapContainer" height="100%" width="100%" src="index.aspx" 
      frameborder="0" scrolling="auto"></iframe> 
</div>

呼叫錨標記的點擊javascript函數。而在JavaScript函數編寫代碼：

$ JQ（「#GoogleMapContainer」）對話框（{ 模式：真，寬度：750，
標題： '谷歌地圖'，可調整大小：假的，
開：功能（類型，數據）; }）; {$ JQ（本）.parent（）appendTo（「形式」）。}

請建議是否正確的方法或我需要做一些修改！

來源

2011-10-19 03:45:05

您可能想嘗試處理iframe的lightbox插件。 Pirobox就是一個例子。

此插件使用rel屬性來設置lightbox選項。在你的情況下，你會使用iframe-width-height參數。你的代碼看起來像這樣：

//using 'full' for width and height will make the lightbox fullscreen 
//or you can specify a width and height in pixels. 
<a href="map.aspx" rel="iframe-full-full" class="pirobox_gall1" >Load Map</a>

來源

2011-10-17 14:10:43

用這種方式....

 function initialize() 
     {  
      var latlng = new google.maps.LatLng(25.294371, 55.332642);  
      var myOptions = {  zoom: 8,  center: latlng,  mapTypeId: google.maps.MapTypeId.ROADMAP  };  
      var map = new google.maps.Map(document.getElementById("map_canvas"),

myOptions）;

  var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       title: 'Dubai' 
      }); 
      var contentString = 'Dubai'; 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentString, 
       maxWidth: 50 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map,marker); 
      }); 

     } 

    });

</script>

現在只需撥打一個錨點擊或點擊一個按鈕這個初始化（）函數.....

來源

2011-10-19 03:48:27

但是彈出窗口怎麼樣？我需要顯示地圖，還需要從錨點單擊傳遞參數，因爲我可能會在地圖中顯示很多國家/地區。 –

你能解釋一下你到底想要什麼嗎？ –

如何加載谷歌地圖使用jQuery的錨點擊

回答

相關問題