javascript - Google Maps V3 setDirections() callback - Stack Overflow

admin管理员组

文章数量:1310099

Is there a posibility to get a callback when setDirections() is executed?

<script type="text/javascript" src=";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 autoplete = new google.maps.places.Autoplete(document.getElementById('gmap_input'));
        autoplete.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(autoplete, 'place_changed', function() {
            var place = autoplete.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>

Is there a posibility to get a callback when setDirections() is executed?

<script type="text/javascript" src="http://maps.google./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 autoplete = new google.maps.places.Autoplete(document.getElementById('gmap_input'));
        autoplete.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(autoplete, 'place_changed', function() {
            var place = autoplete.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>

• javascript
• jquery
• google-maps
• callback

Share Improve this question Follow edited Aug 30, 2011 at 6:30 DIDi asked Aug 29, 2011 at 9:33 DIDiDIDi 4311 gold badge11 silver badge44 bronze badges 1

• excellent explanation and answer: <stackoverflow./questions/4657860/…> – Kappa Commented Feb 15, 2013 at 11:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can bind an EventListener for directions_changed to your directionsDisplay:

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
});

Is that what you were after?

本文标签： javascriptGoogle Maps V3 setDirections() callbackStack Overflow