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

回答

相关问题