全画面を占めるマップを含むスタンドアロンのページを表示できるように、jQuery モバイルを Google マップと連携させています。ただし、マップに移動するボタンがある単純な 2 ページの例を作成する方法がわかりません。
すべての例の body タグに 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 画面の例を実装してみました。ただし、マップがテキスト ボックスの下に表示され (必要に応じて新しいページには表示されません)、次のエラーが表示されます。
キャッチされていない TypeError: 未定義のメソッド '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>
要約すると、私の問題は次のとおりです。
JavaScriptを配置する必要がある場所について非常に混乱しています。最初のスタンドアロン ページの例では、javascript を head タグに移動すると、何も機能しません。頭と体にjavascriptを入れる必要がありますか? もしそうなら、何がどこに行きますか？
pagecreateこの例をどのように実装すればよいですか? また、一般的にいつ使用する必要がありますか?この基本的な例を機能させるには、他に何をする必要がありますか?
余計なものが何も入っていない単純なモバイル jQuery コードへのポインタはありますか?