google maps API: как показать направление движения?

Question

Есть ли простое решение, чтобы исправить функцию ROUTE

var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 

var map; 
var digiLocation = { "lat" : "51.597336" , "long" : "-0.109035" }; 
$(document).ready(function() { 
    $("#direction-route").click(function(event){ 
    event.preventDefault(); 
    var locationStart = "turnpike lane" 
    calcRoute(locationStart) 
    }); 
    var laLatLng; 
    initialize(); 
}); 
// Set pointer at the middle while resize 
google.maps.event.addDomListener(window, "resize", function() { 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
}); 
function calcRoute(locationStart){ 
    var request = { 
     origin: locationStart, 
     destination:(digiLocation.lat, digiLocation.long), 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     myLatlng.setDirections(response); 
    } 
    }); 
} 

function initialize() { 
    var myLatlng = new google.maps.LatLng(digiLocation.lat, digiLocation.long); 
    var myOptions = { 
     scrollwheel: false, 
     zoom: 16, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     styles: [ { "stylers": [{ "saturation": -100 } ]}] 
    }; 
    map = new google.maps.Map(document.getElementById('digi-map'), myOptions); 
    marker = new google.maps.Marker({ 
     position: myLatlng, 
     icon: 'img/digi-marker.png', 
     map: map 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

http://jsfiddle.net/sweetmaanu/qQjeB/

Answer 1

О мальчик, это было полно ошибок! :-)

1. Способ, которым вы настроили свой код, myLatlng требует глобальной области действия, иначе функция calcRoute недоступна.
2. request.destination: новый google.maps.LatLng (digiLocation.lat, digiLocation.long)
3. Вы никогда не установить объект directionsDisplay:
   • directionsDisplay = новый google.maps.DirectionsRenderer();
   • directionDisplay.setMap (Карта);
4. calcRoute должен включать эту строку: directionDisplay.setDirections (response);

Смотрите рабочую скрипку: http://jsfiddle.net/manishie/5fGEZ/

JavaScript:

var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 

var map; 
var digiLocation = { 
    "lat": "51.597336", 
     "long": "-0.109035" 
}; 
var myLatlng = new google.maps.LatLng(digiLocation.lat, digiLocation.long); 

$(document).ready(function() { 
    $("#direction-route").click(function (event) { 
     event.preventDefault(); 
     var locationStart = "turnpike lane" 
     calcRoute(locationStart) 
    }); 
    var laLatLng; 
    initialize(); 
}); 
// Set pointer at the middle while resize 
google.maps.event.addDomListener(window, "resize", function() { 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
}); 

function calcRoute(locationStart) { 
    var request = { 
     origin: locationStart, 
     destination: new google.maps.LatLng(digiLocation.lat, digiLocation.long), 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function (response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } 
    }); 
} 

function initialize() { 
    var myOptions = { 
     scrollwheel: false, 
     zoom: 16, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     styles: [{ 
      "stylers": [{ 
       "saturation": -100 
      }] 
     }] 
    }; 
    map = new google.maps.Map(document.getElementById('digi-map'), myOptions); 
    marker = new google.maps.Marker({ 
     position: myLatlng, 
     icon: 'img/digi-marker.png', 
     map: map 
    }); 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    directionsDisplay.setMap(map); 

} 
google.maps.event.addDomListener(window, 'load', initialize);