0
我利用一个新项目此演示
： http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map谷歌地图V3 - jQuery的演示 - 地图标记
唯一的事情我改变了我是将有目的地有点放大地图上预装。
我有一个艰难的时间锻炼是...如何让地图标记显示在负载上的目的地位置？
这里是清理版本的工作图（只需要链接到modernizer）。如果任何人都可以修改以在地图上显示标记（加载时的目的地，以及在更改地图的起点上放置时），则可以成为救生员。
非常感谢 -Dave
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link type="text/css" rel="stylesheet" href="http://jquery-ui-map.googlecode.com/svn/trunk/demos/css/jquery-mobile-1.0/jquery.mobile.css" />
<link rel="stylesheet" href="http://jquery-ui-map.googlecode.com/svn/trunk/demos/css/mobile.css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="../js/modernizr.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/demos/js/demo.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '40.74843,-73.98566', 'zoom': 18 };
////////////////////////////////////////////////////////////
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
////////////////////////////////////////////////////////////
$('#directions_map').live('pageinit', function() {
demo.add('directions_map', function() {
$('#map_canvas_1').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.set('getCurrentPosition', function() {
self.refresh();
self.getCurrentPosition(function(position, status) {
if (status === 'OK') {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
self.get('map').panTo(latlng);
self.search({ 'location': latlng }, function(results, status) {
if (status === 'OK') {
$('#from').val(results[0].formatted_address);
}
});
} else {
alert('Unable to get current position');
}
});
});
$('#submit').click(function() {
self.displayDirections({ 'origin': $('#from').val(), 'destination': $('#to').val(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING }, { 'panel': document.getElementById('directions')}, function(response, status) {
(status === 'OK') ? $('#results').show() : $('#results').hide();
});
return false;
});
}});
}).load('directions_map');
});
$('#directions_map').live('pageshow', function() {
demo.add('directions_map', $('#map_canvas_1').gmap('get', 'getCurrentPosition')).load('directions_map');
});
////////////////////////////////////////////////////////////
$('#gps_map').live('pageinit', function() {
demo.add('gps_map', function() {
$('#map_canvas_2').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function(map) {
var self = this;
self.watchPosition(function(position, status) {
if (status === 'OK') {
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
if (!self.get('markers').client) {
self.addMarker({ 'id': 'client', 'position': latlng, 'bounds': true });
} else {
self.get('markers').client.setPosition(latlng);
map.panTo(latlng);
}
}
});
}});
}).load('gps_map');
});
$('#gps_map').live('pageshow', function() {
demo.add('gps_map', function() { $('#map_canvas_2').gmap('refresh'); }).load('gps_map');
});
$('#gps_map').live("pagehide", function() {
demo.add('gps_map', function() { $('#map_canvas_2').gmap('clearWatch'); }).load('gps_map');
});
////////////////////////////////////////////////////////////
$('#places').live('pageinit', function() {
demo.add('places_1', function() {
$('#map_canvas_3').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
var control = self.get('control', function() {
$(self.el).append('<div id="control"><div><input id="places-search" class="ui-bar-d ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-d ui-autocomplete-input" type="text"/></div></div>');
self.autocomplete($('#places-search')[0], function(ui) {
self.clear('markers');
self.set('bounds', null);
self.placesSearch({ 'location': ui.item.position, 'radius': '5000' }, function(results, status) {
if (status === 'OK') {
$.each(results, function(i, item) {
self.addMarker({ 'id': item.id, 'position': item.geometry.location, 'bounds':true }).click(function() {
self.openInfoWindow({'content': '<h4>'+item.name+'</h4>'}, this);
});
});
}
});
});
return $('#control')[0];
});
self.addControl(new control(), 1);
}});
}).load('places_1');
});
$('#places').live('pageshow', function() {
demo.add('places_2', function() { $('#map_canvas_3').gmap('refresh'); }).load('places_2');
});
</script>
</head>
<body>
<div id="directions_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_1" style="height:300px;"></div>
<p>
<label for="from">From</label>
<input id="from" class="ui-bar-c" type="text" value="" />
</p>
<p>
<label for="to">To</label>
<input id="to" class="ui-bar-c" type="text" value="350 5th Ave, New York, NY 10118" />
</p>
<a id="submit" href="#" data-role="button" data-icon="search">Get directions</a>
</div>
<div id="results" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" style="display:none;">
<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top ui-btn-up-undefined">Results</div>
<div id="directions"></div>
<div class="ui-li ui-li-divider ui-btn ui-bar-b ui-corner-bottom ui-btn-up-undefined"></div>
</div>
</div></div>
</body>
</html>