Google Maps API 3& jQTouch [英] Google Maps API 3 & jQTouch

问题描述

我在jQTouch中显示地图（API 3）时遇到问题。在第一次加载浏览器时，它只显示地图的一部分，但如果我调整窗口的大小，那很好。我试图使用 google.maps.event.trigger（map_canvas，'resize'）; 函数，但不认为我把它放在正确的地方或我的代码有什么问题吗？所有帮助将不胜感激。

 < div id =locations> 
< div class =toolbar> 
< h1>位置< / h1> 
< a class =backhref =＃>主页< / a> 
< / div> 
 
< div id =map_canvasstyle =width：100％; height：240px>< / div> 
 
< script type =text / javascript> 
 
函数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（地图，地点）; 
 
} 
 
 var localities = [
 ['Devonport'，50.370095229957016，-4.169440269470215，3]，
 ['John Bull Building'，50.41588787780982 ，-4.1097986698150635，2]，
 ['波特兰广场'，50.375110980041484，-4.138498306274414,1] 
]; 
 
函数setMarkers（地图，位置）{
 
 var image = new google.maps.MarkerImage（'http://code.google.com/apis/maps/documentation /javascript/examples/images/beachflag.png'，
 
新增google.maps.Size（20,32），
 
新增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，20，18，20，18，1]，
类型：'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，
形状：形状，
标题：位置[0]，
 zIndex：位置[3] 
}）; 
} 
} 
< / script> 
 
 <？php 
 include（'includes / bottom-nav.php'）; 
？> 
< / div> 
  

解决方案

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

在api的第2版中，您可以在地图构造器中指定大小，但是，在v3中这是不可能的。我在互联网上看到很多帖子都有问题，都是由于这种疏漏。

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

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

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

I'm having a problem displaying a map (API 3) in jQTouch. In a browser when first loaded it only shows part of the map but if I resize the window it is fine. I'm trying to use the google.maps.event.trigger(map_canvas, 'resize'); function but don't think I am putting it in the right place or is there something else wrong with my code? All help would be much appreciated.

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

解决方案

This is due to the api not knowing how big the map view is because jqtouch hides the page div.

In v2 of the api you could specify a size in the map constructor but alas, this is not possible yet in v3. I've seen many posts around the internet all having problems, all due to this omission.

google.maps.event.trigger(map_canvas, 'resize') does not seem to do anything to solve this.

Anyway, the answer is to delay constructing your map until the div it is contained in is visible. I'm doing this once, on 'pageAnimationEnd'.

You'll also need to have fixed the size of the map div in CSS (but this was required in v2 also).

这篇关于Google Maps API 3& jQTouch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！