如何使用jQuery Mobile显示全屏Google地图？ [英] How can I display a full screen google map with jQuery Mobile?
本文介绍了如何使用jQuery Mobile显示全屏Google地图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下代码显示奇怪的输出。我应该看到一个全屏移动地图。但由于某种原因，它仅显示在屏幕的一部分上。我使用 jquery.ui.map 进行映射。
<！DOCTYPE html>
< html>
< head>
< title>我的页面< /标题>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =css / jquery.mobile-1.1.0.min.css/>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=true>< / script>
< script src =js / jquery-1.7.1.min.js>< / script>
< script src =js / jquery.mobile-1.1.0.min.js>< / script>
< script type =text / javascriptsrc =js / jquery.ui.map.min.js>< / script>
< / head>
< body>
< div data-role =page>
< div data-role =header>
< h1>我的标题< / h1>
< / div><！ - / header - >
< div data-role =contentid =map_canvasname =contentMain>
< / div><！ - / content - >
< / div><！ - / page - >
< script>
'（'＃map_canvas'）。gmap（）。bind（'init'，function（）{
//这个URL不能在你的本地主机上运行，所以你需要更改它
//见http://en.wikipedia.org/wiki/Same_origin_policy
$ .getJSON（'http://jquery-ui-map.googlecode.com/svn/trunk/demos /json/demo.json'，function（data）{
$ .each（data.markers，function（i，marker）{
$（'＃map_canvas'）.gmap（'addMarker'， {
'position'：new google.maps.LatLng（marker.latitude，marker.longitude），
'bounds'：true
}）。click（function（）{
$（'＃map_canvas'）。gmap（'openInfoWindow'，{'content'：marker.content}，this）;
}）;
}）;
}）;
}）;
< / script>
< / body>
< / html>
输出：
预先致谢。
解决方案
我的手机网站的解决方案是设置样式 position：absolute;宽度：100％; height：100％; 为canvas div。您可以使用顶部和底部样式为工具栏留出空间。
The following code displays strange output. I should see a full screen mobile map. But for some reason it shows on just a portion of the screen. I am using jquery.ui.map for mapping.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content" id="map_canvas" name="contentMain">
</div><!-- /content -->
</div><!-- /page -->
<script>
$('#map_canvas').gmap().bind('init', function() {
// This URL won't work on your localhost, so you need to change it
// see http://en.wikipedia.org/wiki/Same_origin_policy
$.getJSON( 'http://jquery-ui-map.googlecode.com/svn/trunk/demos/json/demo.json', function(data) {
$.each( data.markers, function(i, marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'bounds': true
}).click(function() {
$('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this);
});
});
});
});
</script>
</body>
</html>
Output:
Thanks in advance.
解决方案
The solution for my mobile website was to set styles position:absolute; width:100%; height:100%; for the canvas div. You can use the top and bottom styles to leave space for toolbars.
这篇关于如何使用jQuery Mobile显示全屏Google地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
