我正在打开此页面的链接上执行 rel="external",因此 DOM 会重新加载,这应该可以排除很多问题。
然而,使用下面的代码,我得到了一个带有漂亮页眉和页脚的巨大红色背景——尽管正在调用该函数,但地图并没有初始化。谁能发现问题?这个错误一直困扰着我;我已经尝试了一百万种方法,包括将其重新设计为没有 rel="external" 的多页模板,但这也不起作用。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(function(){initializeMap(42,-73);});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var crosshairLayer = new google.maps.KmlLayer('http://freezoo.alwaysdata.net/justcrosshair2.kml',
{preserveViewport: true});
crosshairLayer.setMap(map);
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
</script>
</head>
<body>
<div data-role="page" data-theme="e" data-add-back-btn="true" class="map1" id="testing">
<div data-role="header"><h1>Map Page</h1></div>
<div id="content" style="position:absolute; bottom:40px; top:40px; left:0px; right:0px; background:green;">
<div id="map_canvas" style="position:absolute; top:0px; bottom:0px; width:100%; background:red;"></div>
</div>
<div data-role="footer" style="position:absolute; bottom:0px; width:100%;">
<h1>Working!</h1>
</div>
</div>
</body>
</html>