如何在jQuery mobile中指定带有行车方向的Google地图

Question

我在PhoneGap（jQuery mobile）中完成了基于Google Maps的应用程序。任务是连接起始位置和结束位置。我可以使用标记和折线技术链接这些点。我只能得到一条连接两者的直线。但是，我想通过这两个位置之间的行车路径连接这两个位置。就像下面地图中标记的区域一样。请帮帮我。

我的代码在这里：http://jsfiddle.net/rajmathan/NALA5/

更新：我还在ActionScript中找到了具有相同功能的代码。但是，我不知道如何在mycode中使用它

var directionOptions:DirectionsOptions = new DirectionsOptions({language: 'en',countryCode: 'US,DE',travelMode: DirectionsOptions.TRAVEL_MODE_DRIVING});

Answer 1

<script>
$(document).ready(function(){
  navigator.geolocation.getCurrentPosition(onSuccess, onError);
});

function onSuccess(position) {
  var vLatitude = 18.9750;
  var vLongitude = 72.8258;
  var cur_lat = position.coords.latitude;
  var cur_lng = position.coords.longitude;
  var start = cur_lat+","+cur_lng;
  var end = vLatitude+","+vLongitude;
  var url = 'https://maps.google.com/?saddr='+start+'&daddr='+end;

  location.href = url;

}


function onError(error)
{
   alert((error.code)

}
</script>

如果您正在使用PhoneGap，则应安装InAppBrowser并打开这样的URL ...而不是location.href

var ref = window.open(url, 'random_string', 'location=no');

或者

你也可以......

<强> HTML

  <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   <div style="width:100%; margin:0px 0px 0 0px; float:left;"> 
     <div id="map_canvas" style="width:100%;height:250px; position:relative; bottom:5px;top:5px;"></div>
   </div>
   <div class="restaurant_block_content" id="tGetDirection"></div>

<强> JAVASCRIPT

var cur_lat = "";
var cur_lng = ""
var vLatitude = "";
var vLongitude = "";
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var myOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);

  var start = '23.0300, 72.5800';
  var end = '18.9750, 72.8258';

  //var start = cur_lat+","+cur_lng;
  // var end = vLatitude+","+vLongitude;

 var request = {
   origin:start, 
   destination:end,
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };
 directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);    
  var myRoute = response.routes[0];

  /* instructions */


  var txtDir = '<div><strong>Total Distance : '+myRoute.legs[0].distance.text+'</strong></div><div><strong>Total Duration : '+myRoute.legs[0].duration.text+'</strong></div><ol>';      
  for (var i=0; i<myRoute.legs[0].steps.length; i++) {
    if(myRoute.legs[0].steps[i].maneuver.length > 0)
       maneuver = '<img src="img/'+myRoute.legs[0].steps[i].maneuver+'.png" style="margin-right:10px;width:12px; height:12px;" >'
    else
      maneuver = "";
    txtDir += '<li>'+maneuver+myRoute.legs[0].steps[i].instructions+' <br><strong style="float:right;">'+myRoute.legs[0].steps[i].distance.text+'</strong></li>';
    //alert(myRoute.legs[0].steps[i].maneuver.length)
    //google.maps.geometry.encoding.decodePath(myRoute.legs[0].steps[i].polyline.points)straight
  }
  txtDir += '</ol>';
  document.getElementById('tGetDirection').innerHTML = txtDir;
  $('#tGetDirection').show();

  $.mobile.hidePageLoadingMsg();
  }
  });
 }