如何使用jqueryplugin全屏googlemaps

Question

如下图所示，地图仅显示在左上角，可以在整个屏幕上拖动它，但它会跳回到那个方块并且只显示在那里。

Title： SemiOfficial jquery插件中提到的插件

所以我想知道如何解决这个问题？

在图片下方你会找到我的html，插件列表和js代码。

HTML / JSP :(应该提到这是我的应用程序中的第二个.jsp，所以它应该有希望在pageinit方法中初始化）

<!DOCTYPE html> 
<html>
    <head> 
        <title>Map</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
    </head> 
    <body> 
        <!-- Start of first page -->
        <div data-role="page" id="mapmode" name="mapmode">

            <div data-role="header" id="header" name="header">
                <p>Header</p>
            </div><!-- /header -->
            <div data-role="content" id="content" name="content">   
                <div id="map_canvas" style="width:300px;height:350px"></div>

            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>

插件：

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.1.0.js"></script>
        <script type="text/javascript"
                src="http://maps.googleapis.com/maps/api/js?key=_MY_KEY__INSERT_HERE_&sensor=true">
        </script>
        <script type="text/javascript" src="js/jquery.ui.map.js"></script>
        <script type="text/javascript" src="js/cordova-1.9.0.js"></script>
        <script type="text/javascript" src="js/FileManager.js"></script>
        <script type="text/javascript" src="js/LocalAction.js"></script>
        <script type="text/javascript" src="js/Menu.js"></script>
        <script type="text/javascript" src="js/MenuLoader.js"></script>
        <script type="text/javascript" src="js/PageHeader.js"></script>
        <script type="text/javascript" src="js/Mapmode.js"></script>

Mapmode.js：

var mapdata = {
    destination: new google.maps.LatLng(59.3327881, 18.064488100000062)
};

$(document).on("pageinit", "#mapmode", function(event) {
    initMapMode();
    document.getElementById("map_canvas").style.height=$(window).height();
    document.getElementById("map_canvas").style.width=$(window).width();
    //Create the map then make 'displayDirections' request
    $('#map_canvas').gmap({
        'center' : mapdata.destination, 
        'mapTypeControl' : true, 
        'navigationControl' : true,
        'navigationControlOptions' : {
            'position':google.maps.ControlPosition.LEFT_TOP
        }
    })
    .bind('init', function() {
        $('.refresh').trigger('tap');        
    });
});

$('#mapmode').on("pageshow", function() {
    $('#map_canvas').gmap('refresh');
});

function initMapMode(){
    initPageHeader();
    initMapModeContent();
}

function initMapModeContent(){
}

function fadingMsg (locMsg) {
    $("<div class='ui-overlay-shadow ui-body-e ui-corner-all fading-msg'>" + locMsg + "</div>")
    .css({
        "display": "block", 
        "opacity": 0.9, 
        "top": $(window).scrollTop() + 100
    })
    .appendTo( $.mobile.pageContainer )
    .delay( 2200 )
    .fadeOut( 1000, function(){
        $(this).remove();
    });
}

// Request display of directions, requires jquery.ui.map.services.js
var toggleval = true; // used for test case: static locations
$('.refresh').live("tap", function() {
    // START: Tracking location with test lat/long coordinates
    // Toggle between two origins to test refresh, force new route to be calculated
    var position = {};
    if (toggleval) {
        toggleval = false;
        position = {
            coords: {
                latitude: 57.6969943, 
                longitude: 11.9865
            }
        }; // Gothenburg
    } else {
        toggleval = true;
        position = {
            coords: {
                latitude: 58.5365967, 
                longitude: 15.0373319
            }
        }; // Motala
    }
    $('#map_canvas').gmap('displayDirections', 
    {
        'origin' : new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
        'destination' : mapdata.destination, 
        'travelMode' : google.maps.DirectionsTravelMode.DRIVING
    },
    {
        'panel' : document.getElementById('dir_panel')
    },
    function (result, status) {
        if (status === 'OK') {
            var center = result.routes[0].bounds.getCenter();
            $('#map_canvas').gmap('option', 'center', center);
            $('#map_canvas').gmap('refresh');
        } else {
            alert('Unable to get route');
        }
    }); 
    // END: Tracking location with test lat/long coordinates
    $(this).removeClass($.mobile.activeBtnClass);
    return false;
});

initpageheader函数：

function initPageHeader(){
    //TODO getdata with the id(page we are currently on).
    $("#header").html(function(index, originalMarkup) {
        return '<a data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" '+
        'data-corners="true" class="ui-btn-left ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all" href="#" '+
        'data-rel="back" data-role="button"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">'+
        '<img src="../images/back.png" alt="back" align="middle" vspace="2"></span></span></a>'+
        '<h1 aria-level="1" role="heading" class="ui-title">'+
        '<img src="../images/main_header.png" alt="logo" align="middle" vspace="2">'+
        '</h1><a data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true"'+
        'data-corners="true" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-inline ui-shadow ui-btn-corner-all" '+
        'href="#first" data-role="button" data-inline="true"><span class="ui-btn-inner ui-btn-corner-all">'+
        '<span class="ui-btn-text">'+
        '<img src="../images/home.png" alt="picture to take you to the first page" align="middle">'+
        '</span></span></a>';
    });
}

Answer 1

尝试使用api函数刷新地图的框架

在这一行之后

$('#map_canvas').gmap('refresh');

试试这个

google.maps.event.trigger(map, "resize");

Answer 2

在持有谷歌地图的容器上。

#map_canvas {max-width：none; }