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第2版,你可以指定地图构造函数的大小,但很可惜,这是不可能的但在V3.我看到互联网上的很多帖子都有问题,都是由于这个遗漏.

google.maps.event.trigger(map_canvas,'resize')似乎没有做任何事情来解决这个问题.

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

您还需要在CSS中修复map div的大小(但这也是v2中所必需的).