【发布时间】：2012-07-24 19:04:53
【问题描述】：
如下图所示，地图只显示在左上角，可以在整个屏幕上拖动它，但它会跳回那个方块，只显示在那里。
标题中提到的插件：SemiOfficial jquery plugin
所以我想知道如何解决这个问题？
在图片下方，您会找到我的 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>';
});
}
【问题讨论】：
-
我们还需要 CSS。当某些父母没有相对位置时，GoogleMap 有时会这样做。你能提供一个包含所有必需插件的小提琴吗？
-
它几乎是标准的 jquerymobile css，但肯定会放一些东西 :)
-
jsfiddle.net/qDe7s ...我是新手，所以如果这不是你想要的，请不要挂我:)
-
我认为this question（第二个答案）可能是相关的。我之前也遇到过类似的问题，这是因为包含元素在地图初始化时没有定义它的宽度和高度。也许这里正在发生类似的事情？
-
为您创建了一个 jsfiddle，其中包含标准的 googlemaps、jquery、jquerymobile 和 jquerymobile css。工作正常。 jsfiddle.net/asfR9
标签： jquery jquery-plugins jquery-mobile google-maps-api-3