我有 jQuery 移动与谷歌地图一起使用，这样我就可以显示一个独立的页面，其中的地图占据了全屏。但是，我不知道如何制作一个简单的 2 页示例，其中有一个按钮可以将我带到地图。
我对为什么所有示例的正文标记中都有 javascript 感到非常困惑。我一直在尝试遵循此处的示例http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html，但很难弄清楚什么是仅对所有源 HTML 中的 basic_map 是必需的。我是使用 jQuery 和 javascript 的新手。
这是作为独立页面工作的 HTML 代码。
<!doctype html>
<html lang="en">
<head>
<title>Simple Map</title>
<!--link type="text/css" rel="stylesheet" href="css/style.css" -->
</head>
<body>
<div id="basic_map" data-role="page" class="page-map">
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="./jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
<!--script type="text/javascript" src="./jquery-ui-map-3.0-rc/demos/js/demo.js"></script-->
<script type="text/javascript">
$(function(){
initializeMap(37.6, -122.1);
});
function initializeMap(lat,lng) {
var adjustedHeight = ($(window).height());
$('#map_canvas').css({height:adjustedHeight});
//$("#map_canvas").height = $(window).height() - $("#header").height() - $("#footer").height();
setTimeout(function() {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}, 500);
}
</script>
</body>
</html>
我已经尝试实现以下 2 个屏幕示例，我在第一页上输入纬度和经度，然后转到下一页上以该点为中心的地图。但是，我的地图显示在文本框下（而不是根据需要显示在新页面上）并且我收到错误消息：
未捕获的类型错误：无法调用未定义的方法“changePage”
根据其他帖子，错误与我需要调用pagecreate函数而不是$(document).ready(). 我没有调用这些函数中的任何一个，因为我不知道它们是否有必要，因为我能够制作其他简单的多页面移动 Web 应用程序，而无需等待其他页面准备好或创建。
我产生错误的多个屏幕代码是
<!doctype html>
<html lang="en">
<head>
<title>Simple Map</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?&sensor=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="./jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
<!--script type="text/javascript" src="./jquery-ui-map-3.0-rc/demos/js/demo.js"></script-->
<script type="text/javascript">
var lat;
var lng;
function plotPoint(){
lat = document.getElementById("lat").value;
lng = document.getElementById("lng").value;
initializeMap(lat,lng);
$.mobile.changePage("#basic_map", "pop");
}
function initializeMap(lat,lng) {
var adjustedHeight = ($(window).height());
$('#map_canvas').css({height:adjustedHeight});
//$("#map_canvas").height = $(window).height() - $("#header").height() - $("#footer").height();
setTimeout(function() {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}, 500);
}
</script>
<!-- Main Page-->
<!-- Start of second page: #viewMap -->
<div data-role="page" id="main" data-theme="c">
<div data-role="header">
<h1>Main Page</h1>
</div><!-- /header -->
<div data-role="content" data-theme="c">
<label for="lat">Latitude:</label>
<input type="text" name="lat" id="lat" value="" />
<label for="lng">Longitude:</label>
<input type="text" name="lng" id="lng" value="" />
<a href="#" data-role="button" data-theme="b" onclick="plotPoint()">Plot this point</a>
</div><!-- /content -->
</div><!-- /viewMap page -->
<div id="basic_map" data-role="page">
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
总而言之，我的问题是：
我很困惑我需要在哪里放置我的 javascripts。在第一个独立页面示例中，如果我将 javascript 移动到 head 标签，则没有任何效果。我需要将javascript放在头部和身体中吗？如果是这样，什么去哪里？
我如何
pagecreate在这个例子中实现，一般什么时候应该使用它？我还需要做什么才能使这个基本示例正常工作？
是否有指向简单的移动 jQuery 代码的指针，而其中没有大量额外的东西？