javascript - 谷歌地图 V3 setDirections() 回调

Question

是否有可能在执行 setDirections() 时获得回调？

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=<?=SYS_LANG;?>"></script>
<script type="text/javascript">
$(document).ready(function(){
    var destination = '<?=$_POST['address'];?>';
    var directionsDisplay = new google.maps.DirectionsRenderer({ draggable: true });
    var directionsService = new google.maps.DirectionsService();
    var geocoder;
    var infoWindowContent = '<div id="gmap_infowindow">infocontent</div>';
    var map;
    var marker;
    var position = new google.maps.LatLng(46.80193957664, 11.41754150390625);

    function calcRoute(start, end) {
        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);
            }
        });
    }
    function codeAddress(address) {
        if(geocoder) {
            geocoder.geocode({ 'address': address }, function(results, status) {
                if(status == google.maps.GeocoderStatus.OK) {
                    calcRoute(results[0].geometry.location, position);
                    document.getElementById('gmap_input').value = address;
                }
            });
        }
    }

    function initialize() {
        if(destination) geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById('gmap_map'), {
            center: new google.maps.LatLng(46.80193957664, 11.41754150390625),
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        });
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById("gmap_directions"));

        var autocomplete = new google.maps.places.Autocomplete(document.getElementById('gmap_input'));
        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow({ maxWidth: 240 });
        var marker = new google.maps.Marker({
            position: position, 
            map: map,
            title:"Title"
        });

        infowindow.setContent(infoWindowContent);
        infowindow.open(map, marker);

        if(destination) codeAddress(destination);

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);   
        });
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
            }
            calcRoute(place.geometry.location, position);
        });
        google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
            $('#article').mCustomScrollbar('vertical', 350, 'easeOutCirc', 1.05, 'auto', 'yes', 'no', false);
        });
    }

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

    $('#gmap_map').css('height', '310px');
    $('#article form').submit(function(event){ event.preventDefault(); });
});
</script>

Answer 1

您可以将 directions_changed 的 EventListener 绑定(bind)到您的方向显示:

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({ 'map': map });

//...

var request = {
  origin     : ...,
  destination: ...,
  travelMode : google.maps.DirectionsTravelMode.WALKING
};

directionsService.route(request, function(response, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
  }
});

// ...

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
  // ... CALLBACK
});

这就是你想要的吗？