Google 地图 API 3 和杰Q触摸

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 中，您可以在地图构造函数中指定大小，但遗憾的是，这在 v3 中还不可能。我在互联网上看到很多帖子都有问题，都是由于这个疏忽造成的。

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

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

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