Google Maps API 3和jQTouch

Question

我在jQTouch中显示地图（API 3）时遇到问题。 在浏览器中首次加载时，它只显示地图的一部分，但如果我调整窗口大小，则可以。 我正在尝试使用google.maps.event.trigger(map_canvas, 'resize'); 功能，但不认为我把它放在正确的地方或我的代码有什么其他错误？ 非常感谢所有帮助。

       <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>

Answer 1

这是由于api不知道地图视图有多大，因为jqtouch隐藏了页面div。

在api的v2中你可以在map构造函数中指定一个大小但是唉，这在v3中是不可能的。 我看到互联网上的很多帖子都有问题，都是由于这个遗漏。

google.maps.event.trigger（map_canvas，'resize'）似乎没有做任何事情来解决这个问题。

无论如何，答案是延迟构建地图，直到它所包含的div可见。 我在'pageAnimationEnd'上做过一次。

您还需要在CSS中修复map div的大小（但这也是v2中所必需的）。