无法让 Google Maps API v3 在 jQuery Mobile 上完全加载

Question

无法在 jquery mobile 上加载谷歌地图。它确实会加载，但只有当您在浏览器上点击刷新时才会加载。我目前正在使用 jquery.mobile 1.3.1 和 jquery 1.9.1。我不知道该怎么做，因为我正在学习这一切。

function initialize() {

        //add map, the type of map
        var map = new google.maps.Map(document.getElementById('outage_map'), {
            zoom: 9,
            center: new google.maps.LatLng(37.7749295, -122.4194155),
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var $map = $('#outage_map');
        $map.height( $(window).height(200) - $map.offset().top );

        //declare marker call it 'i'
        var marker, i;

        //declare infowindow
        var infowindow = new google.maps.InfoWindow({
            maxWidth: 250,
        });

        //add locations
        var locations = [
            ['San Francisco: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.789241, -122.41073, 'images/electric.png'],

            ['San Francisco: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 37.806992, -122.41051, 'images/electric.png'],

            ['San Francisco: Gas Interruption <br> Reported: 9:30am <br> Estimated Restore Time: 12:00am', 37.789241, -122.41073, 'images/gas.png'],

            ['San Francisco: Planned Maintenance <br> Time: 9:00am to 2:30pm ', 37.784748, -122.468982, 'images/maintenance.png'],

            ['Shingletown: Power Outage <br> Reported: 9:00am <br> Estimated Restore Time: 12:00pm', 40.4923784, -121.8891586, 'images/electric.png'],

            ['San Mateo: Maintenance <br> Time: 10:00am to 12:00pm', 37.5629917, -122.3255254, 'images/maintenance.png'],

            ['Concord: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.9779776, -122.0310733, 'images/electric.png'],

            ['Hayward: Power Outage <br> Reported: 11:10pm <br> Estimated Restore Time: 4:00am', 37.6688205, -122.0807964, 'images/electric.png'],

            ['Alameda: Maintenance <br> Time: 9:00am to 3:30pm', 37.7652065, -122.2416355, 'images/maintenance.png'],
        ];

        //add marker to each locations
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: locations[i][3]
            });

            //click function to marker, pops up infowindow
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);

地图位于另一个名为“页面”的容器中

<div class="page" data-role="page" id="map_main">
  <!-- navagation -->
  <div data-theme="a" data-role="header" data-position="fixed">
      <a data-role="button" data-direction="reverse" data-transition="slide"
      href="index copy.html" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
          Main
      </a>
      <h3>
          Outage Map
      </h3>
  </div>
  <!-- navagation -->

  <!-- Map -->
  <div class="map_image" id="outage_map"></div>    
  <!-- Map -->

Answer 1

简介

为了能够在 jQM 页面上显示地图，您必须在 pageshow 事件期间显示它。这是因为只能在该点计算正确的页面高度。但即便如此，内容 div 也不会覆盖整个可用表面，因此我们需要手动修复此问题。这不是错误，它只是 jQuery Mobile 的工作原理。

工作示例

工作示例：http://jsfiddle.net/Gajotres/7kGdE/

代码

getRealContentHeight 函数也用于设置正确的内容高度。

$(document).on('pageshow', '#index',function(e,data){   
    $('#map_canvas').css('height',getRealContentHeight());

   // This is the minimum zoom level that we'll allow
   var minZoomLevel = 12;

   var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   // Bounds for North America
   var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(28.70, -127.50), 
     new google.maps.LatLng(48.85, -55.90)
   );

   // Listen for the dragend event
   google.maps.event.addListener(map, 'dragend', function() {
     if (strictBounds.contains(map.getCenter())) return;

     // We're out of bounds - Move the map back within the bounds

     var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

     if (x < minX) x = minX;
     if (x > maxX) x = maxX;
     if (y < minY) y = minY;
     if (y > maxY) y = maxY;

     map.setCenter(new google.maps.LatLng(y, x));
   });

   // Limit the zoom level
   google.maps.event.addListener(map, 'zoom_changed', function() {
     if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
   });  

});

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

编辑

还有另一种不需要 javascript 的解决方案，它只能使用 CSS 来完成。如果您想了解更多信息，请查看 HERE。您可能想查看最后一个解决方案和示例。