对于任何想要将其用于 android 移动应用程序的人来说,这只是一个提示。如果您使用 jQuery 和 PhoneGap,则必须在 index.html 标题中包含上述所有代码。然后,您只需将地图的 html 添加到 index.html 文件中的单个页面。下面是我工作的基于 jQuery 的网站的外观示例。您仍然需要 manifest.xml 中的上述代码。
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link href="assets/www/themes/theme1.css" rel="stylesheet" type="text/css">
<link href="assets/www/css/my.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script type="text/javascript">
var map,
currentPosition,
directionsDisplay,
directionsService;
function initialize(lat, lon) {
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
currentPosition = new google.maps.LatLng(lat, lon);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: currentPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var currentPositionMarker = new google.maps.Marker({
position: currentPosition,
map: map,
title: "Current position"
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(currentPositionMarker, 'click', function () {
infowindow.setContent("Current position: latitude: " + lat + " longitude: " + lon);
infowindow.open(map, currentPositionMarker);
});
}
function locError(error) {
// initialize map with a static predefined latitude, longitude
initialize(59.3426606750, 18.0736160278);
}
function locSuccess(position) {
initialize(position.coords.latitude, position.coords.longitude);
}
function calculateRoute() {
var targetDestination = $("#target-dest").val();
if (currentPosition && currentPosition != '' && targetDestination && targetDestination != '') {
var request = {
origin: currentPosition,
destination: targetDestination,
travelMode: google.maps.DirectionsTravelMode["DRIVING"]
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setPanel(document.getElementById("directions"));
directionsDisplay.setDirections(response);
/*
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
alert(myRoute.steps[i].instructions);
}
*/
$("#results").show();
} else {
$("#results").hide();
}
});
} else {
$("#results").hide();
}
}
$(document).on('click', '#directions-button', function (e) {
e.preventDefault();
calculateRoute();
});
</script>
<script type="text/javascript" src="assets/www/cordova-2.6.0.js"></script>
<script type="text/javascript">
var showGeolocationInfo = function() {
navigator.geolocation.getCurrentPosition(locSuccess, locError);
}
function init(){
document.addEventListener("deviceready", showGeolocationInfo, true);
}
</script>
</head>
<body onload="init();">
<div data-role="page" id="page" data-theme="d">
<img src="assets/www/images/hometitle.png" id="img1"/>
<div class="center-button">
<div data-role="content" id="content1">
<a href="#page2" data-role="button" id="ui-btn" >Curriculum</a>
<a href="#page3" data-role="button" id="ui-btn">About Us</a>
<a href="#page4" data-role="button" id="ui-btn">Events</a>
<a href="#page5" data-role="button" id="ui-btn">Contact Us</a>
<a href="#page7" data-role="button" id="ui-btn">Register</a>
</div>
</div>
</div>
<div data-role="page" id="page2" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Curriculum</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" id="content1">
<h3>About Our Curriculum</h3>
The preschool uses a Creative Curriculum to create an environment that supports learning through play and discovery in a variety of interest centers. This curriculum also helps teachers develop appropriate smalland large group activities to enhance child development. The activities presented thoughout the curricula focus on particular themes, introduction of various concepts, and include many subject areas: reading, social studies, math, science, and physical education.Progress is observed and documented in all developmental areas.
<h3>Classes Offered</h3>
Children must be 2 ½ old by September 30th.<br/>
Preschool hours are from 9:30am to 12:30pm.<br/><br/>
<b>Three-Year-Old Classes:</b><br/><br/>
Monday, Tuesday, and Thursday or (3 day program)<br/>
Monday, Tuesday, Thursday, and Friday (4 day program)<br/><br/>
<b>Four-Year-Old Classes:</b> <br/><br/>
Monday, Tuesday, Thursday, and Friday<br/><br/>
We also offer a “Lunch Bunch” program that will extend your child’s day until 2pm.
</div>
</div>
<div data-role="page" id="page3" data-theme="d">
<div data-role="header" data-theme="d">
<h1>About Us</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" id="content1">
<p> BHCDC was created as an independent non-profit corporation to meet the growing need in the Enon area for education and kindergarten readiness. For 30 years the preschool has been offering a happy, safe, and loving environment providing the highest quality care possible to 2 ½ to 5- year- old children. The preschool is open to all children without regard to their religious, racial, cultural backgrounds, or abilities. BHCDC is licensed through the Department of Social Services of Virginia.</p>
</div>
</div>
<div data-role="page" id="page4" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Events</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" data-theme="d" id="content1">
<div data-role="collapsible-set">
<div data-role="collapsible" >
<h3>School Supplies Fundraiser</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page8" data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Event 2</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page9"data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Event 3</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page10"data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Event 4</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page11"data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Event 5</h3>
<table width="100%" border="0" cellpadding="10" id="table1">
<tr>
<td>
<h4> 4/1/2013 - 4/30/2013</h4>
<p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
<a href="#page12"data-role="button">Take Me There</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div data-role="page" id="page5" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Contact Us</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data- iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" id="content1">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=d&source=s_d&saddr=2025+Florence+Avenue,+Chester,+VA&daddr=&hl=en&geocode=&aq=0&oq=2025+Florence+Avenuechest&sll=38.003385,-79.420925&sspn=5.799074,11.634521&mra=ls&ie=UTF8&t=m&ll=37.32915,-77.321348&spn=0.011944,0.017166&z=15&output=embed"></iframe>
</div><br/>
<table width="100%" border="0" id="table1" >
<tr>
<td>
<h3> Contact Information</h3>
<blockquote>
Address:<blockquote> 2025 Florence Ave<br/><br>
Chester Virginia, 23836
</blockquote></blockquote>
<blockquote>Phone:<blockquote> (804) 319-9183</blockquote> </blockquote>
<a href="#page6" data-role="button"> Contact Us Via Email</a>
</td>
</tr>
</table>
</div>
</div>
<div data-role="page" id="page6" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Contact Us</h1>
<a href="#page5" class="ui-btn-left" data-icon="back" data-iconpos="notext" data-direction="reverse">Events</a>
</div>
<div data-role="content" id="content1">
<iframe height="597" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://ramee.wufoo.com/embed/z7x3p3/"><a href="http://ramee.wufoo.com/forms/z7x3p3/">Fill out my Wufoo form!</a></iframe>
</div>
</div>
<div data-role="page" id="page7" data-theme="d">
<div data-role="header" data-theme="d">
<h1>Register</h1>
<a href="index.html" class="ui-btn-left" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" id="content1">
<iframe height="885" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://ramee.wufoo.com/embed/m7x3z9/"><a href="http://ramee.wufoo.com/forms/m7x3z9/">Fill out my Wufoo form!</a></iframe>
</div>
</div>
<div data-role="page" id="page8" id="basic-map" >
<div data-role="header" data-theme="d">
<h1>Directions</h1>
<a href="#page4" class="ui-btn-left" data-icon="back" data-iconpos="notext" data-direction="reverse">Events</a>
</div>
<div data-role="content" data-theme="d">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
<div data-role="fieldcontain" data-theme="d">
<input type="text" name="target-dest" id="target-dest" value="" />
</div> <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a>
<div id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
</body>
</html>
还要注意添加地图时页面的定义方式。这些 id 标签的顺序非常重要。其他明智的 jQuery 不会识别您网站上的任何页面。
<div data-role="page" id="page8" id="basic-map" >
id="basic-map"
必须最后来。