Google Maps API 3＆jQTouch

我在jQTouch中顯示地圖（API 3）時出現問題。在第一次加載瀏覽器時，它只顯示地圖的一部分，但如果我調整窗口的大小，那很好。我試圖使用google.maps.event.trigger(map_canvas, 'resize');函數，但不認爲我把它放在正確的地方，或者我的代碼有其他錯誤嗎？所有的幫助將不勝感激。Google Maps API 3＆jQTouch

 <div id="locations"> 
      <div class="toolbar"> 
       <h1>Locations</h1> 
       <a class="back" href="#">Home</a> 
      </div> 

    <div id="map_canvas" style="width:100%;height:240px"></div> 

    <script type="text/javascript"> 

    function initialize() { 
    var myOptions = { 
     zoom: 11, 
     center: new google.maps.LatLng(50.451820688650656, -4.2572021484375), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     panControl: false, 
     zoomControl: false, 
     mapTypeControl: false, 
     scaleControl: false, 
     streetViewControl: false 

    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
            myOptions); 

    setMarkers(map, localities); 

    } 

    var localities = [ 
    ['Devonport', 50.370095229957016, -4.169440269470215, 3], 
    ['John Bull Building', 50.41588787780982, -4.1097986698150635, 2], 
     ['Portland Square', 50.375110980041484, -4.138498306274414, 1] 
    ]; 

    function setMarkers(map, locations) { 

    var image = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png', 

     new google.maps.Size(20, 32), 

     new google.maps.Point(0,0), 

     new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag_shadow.png', 

     new google.maps.Size(37, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 

    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
     var location = locations[i]; 
     var myLatLng = new google.maps.LatLng(location[1],location[2]); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      shadow: shadow, 
      icon: image, 
      shape: shape, 
      title: location[0], 
      zIndex: location[3] 
     }); 
    } 
    } 
    </script> 

     <?php 
     include('includes/bottom-nav.php'); 
     ?> 
     </div>

來源

2011-01-29 Steve Bell

我有同樣的問題，你有沒有得到任何解決方案？ – Jakob 2011-02-18 17:16:11

這是由於api不知道地圖視圖有多大，因爲jqtouch隱藏了頁面div。

在api的第2版中，您可以在地圖構造函數中指定大小，但是很可惜，這在v3中尚不可行。我看到很多互聯網上的帖子都有問題，都是由於這種疏漏。

google.maps.event.trigger（map_canvas，'resize'）似乎沒有做任何事情來解決這個問題。

無論如何，答案是延遲構建地圖，直到它包含的div可見。我在'pageAnimationEnd'上做了一次。

您還需要在CSS中修復地圖div的大小（但這也是v2中必需的）。

來源

2011-05-31 08:57:27 ian

如果您在jQueryUI選項卡中嵌入Google地圖，則可以確認存在同樣的問題，並且可以用相同的方式解決 - 而不是將Google Map的初始化函數放置在頁面頁腳中，而必須將其放置在該選項卡的顯示事件。如果你不這樣做，它的行爲方式完全相同，只將部分地圖放在div中。 – xgretsch 2011-10-05 10:02:58

Google Maps API 3＆jQTouch

回答

相關問題