在 jquery mobile 中使用谷歌地图的清晰方向示例？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13345479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 12:32:56 来源:igfitidea点击:
clean example of directions with google maps in jquery mobile?
提问by Rubytastic
Try to get a working jquery mobile maps direction page. There is this example listed:
尝试获得一个有效的 jquery 移动地图方向页面。列出了这个例子：
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map
But the example code is messy and haven't been able to get it working :(. Ikea uses it.
但是示例代码很混乱，无法使其正常工作:(。宜家使用它。
http://m.ikea.com/nl/nl/stores/415/map/
but they also very customized the js so its very hard to see what happens.
但他们也非常定制了 js，所以很难看到会发生什么。
Does anyone know of a good clean example or implementation that's easy to follow?
有谁知道一个很好的干净的例子或易于遵循的实现？
回答by Apostolos Emmanouilidis
Below you can find a basic example of using the Google Maps directions service in a jQuery Mobile page.
您可以在下面找到在 jQuery Mobile 页面中使用 Google Maps 路线服务的基本示例。
<!DOCTYPE html>
<html>
<head>
<title>jQuery mobile with Google maps geo directions example</title>
<meta content="en" http-equiv="content-language">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.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">
$(document).on("pageinit", "#map_page", function() {
initialize();
});
$(document).on('click', '#submit', function(e) {
e.preventDefault();
calculateRoute();
});
var directionDisplay,
directionsService = new google.maps.DirectionsService(),
map;
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);
var myOptions = {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
}
function calculateRoute()
{
var selectedMode = $("#mode").val(),
start = $("#from").val(),
end = $("#to").val();
if(start == '' || end == '')
{
// cannot calculate route
$("#results").hide();
return;
}
else
{
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
$("#results").show();
/*
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
alert(myRoute.steps[i].instructions);
}
*/
}
else {
$("#results").hide();
}
});
}
}
</script>
</head>
<body>
<div data-role="page" id="map_page">
<div data-role="header">
<h1><a href="#">jQuery mobile - Google maps directions service</h1>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:300px;"></div>
<div data-role="fieldcontain">
<label for="from">From</label>
<input type="text" id="from" value="Goteborg, Sweden"/>
</div>
<div data-role="fieldcontain">
<label for="to">To</label>
<input type="text" id="to" value="Stockholm, Sweden"/>
</div>
<div data-role="fieldcontain">
<label for="mode" class="select">Transportation method:</label>
<select name="select-choice-0" id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
</select>
</div>
<a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
</div>
<div id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
</body>
</html>
UPDATE 1:
更新1：
The below example uses the current position which is automatically located and a target destination address which is given from the user.
以下示例使用自动定位的当前位置和用户提供的目标目的地地址。
<!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" />
<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).live("pagebeforeshow", "#map_page", function() {
navigator.geolocation.getCurrentPosition(locSuccess, locError);
});
$(document).on('click', '#directions-button', function(e){
e.preventDefault();
calculateRoute();
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a></h1>
</div>
<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 data-role="fieldcontain">
<label for="target-dest">Target Destination:</label>
<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>
UPDATE 2:
更新 2：
The below example locates the current position and it automatically calculates the distance and displays the route details between the current location and a static predefined destination location.
下面的示例定位当前位置并自动计算距离并显示当前位置和静态预定义目的地位置之间的路线详细信息。
<!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" />
<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,
destinationLatitude = 59.3426606750,
destinationLongitude = 18.0736160278;
function initializeMapAndCalculateRoute(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"
});
// current position marker info
/*
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);
});
*/
// calculate Route
calculateRoute();
}
function locError(error) {
// the current position could not be located
}
function locSuccess(position) {
// initialize map with current position and calculate the route
initializeMapAndCalculateRoute(position.coords.latitude, position.coords.longitude);
}
function calculateRoute() {
var targetDestination = new google.maps.LatLng(destinationLatitude, destinationLongitude);
if (currentPosition != '' && 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).live("pagebeforeshow", "#map_page", function() {
// find current position and on success initialize map and calculate the route
navigator.geolocation.getCurrentPosition(locSuccess, locError);
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a></h1>
</div>
<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 id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
</body>
</html>
I hope this helps.
我希望这有帮助。
