谷歌地图获取路线

Question

我正在使用这段代码来获取两个位置之间的方向，但这段代码只是显示地图，并没有绘制任何方向。

$('#map_canvas').gmap({ 
    'center': new google.maps.LatLng(32.498467,74.542126) 
});
$('#map_canvas').gmap('loadDirections', 'panel', { 
    'origin': new google.maps.LatLng(32.498467,74.542126), 
    'destination': new google.maps.LatLng(29.070574,76.112457), 
    'travelMode': google.maps.DirectionsTravelMode.DRIVING 
});

等待帮助。

提前致谢。

Answer 1

这是我经常使用的代码：
它显示地图上的路线和#info div中的方向信息

<form id="route">                      
   <label>Address: <input type="text" id="addr" /></label>
   <button id="route">Calculate route</button>
</form>
<div id="map_canvas"></div>
<div id="info"></div>

$(function(){
   var center = new google.maps.LatLng(32.498467,74.542126);
   var map = new google.maps.Map(document.getElementById("map_canvas"),{
      center: center,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });
   var m = new google.maps.Marker({map:map,position:center});
   var dD = new google.maps.DirectionsRenderer({map:map,panel:$('#info')[0]});

   $('#route').submit(function(ev){
      var addr = $('#addr').val();
      var ds = new google.maps.DirectionsService();
      ds.route({
         origin:addr,
         destination:center,
         region:'at',
         travelMode: google.maps.TravelMode.DRIVING
      },function(result,status){
      // if(status == google.maps.DirectionsStatus.OK){
            dD.setDirections(result);  
            $('#info').fadeIn(200);             
      // }
      });
      ev.preventDefault();
   });
});