在jquery mobile中显示Google地图时出现问题
你好我正在试图制作一个jQuery的移动页面,它有一张具有特定坐标和几个可折叠项目的地图。我从这个网站获得了地图的代码(http://jsfiddle.net/Gajotres/7kGdE/),但每当我尝试它时,屏幕都会变成空白。我也不希望地图占用整个页面。我希望它与折叠项目一起显示在页面上。任何帮助将不胜感激。由于在jquery mobile中显示Google地图时出现问题
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<style>
#content {
padding: 0;
position : absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
}
</style>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>First Page</h3>
</div>
<div data-role="content" id="content">
<div id="map_canvas" style="height:100%"></div>
<div data-role="collapsibleset">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>First Page</h3>
</div>
</div>
</body>
<script>
$(document).on('pageinit', '#index',function(e,data){
var minZoomLevel = 10;
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
});
});
</script>
</html>
您提供应该没有问题的工作,但是,你必须改变的map_canvas
height
并设置一个静态值的代码。 100%
将不会占据整个高度,因为父div content
高度也未定义。内容div根据内容进行扩展。
#map_canvas {
height: 200px;
width: 100%;
}
另要注意,你应该使用pagecreate
,而不是过时的事件pageginit
。
@谢谢你的帮助=) – speedracer2003 2014-11-06 17:53:11
@ speedracer2003不客气。要添加标记,请检查此小提琴http://jsfiddle.net/Palestinian/Rnh4L/ – Omar 2014-11-06 18:03:20
你不加载谷歌地图JS。 – Omar 2014-11-06 17:16:42
@Omar面团!我不能相信我错过了这一点。我想我只是盯着我的代码太久了LOL谢谢你指出了。我添加了谷歌地图js,但我注意到,当我把一个特定的位置的坐标,小红色标记不显示。有什么办法可以解决这个问题吗? – speedracer2003 2014-11-06 17:35:49
你的代码只加载地图;为了添加标记,为此具有不同的功能。 – Omar 2014-11-06 17:38:43