【问题标题】:Google Maps V3 setDirections() callbackGoogle Maps V3 setDirections() 回调
【发布时间】:2011-08-29 09:33:44
【问题描述】:

执行 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>

【问题讨论】:

  • 精彩讲解及解答:stackoverflow.com/questions/4657860/…>

标签: javascript jquery google-maps callback


【解决方案1】:

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

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

这就是你所追求的吗?

【讨论】:

  • 当地图上的方向改变时触发此事件。我需要更改方向面板。由“directionsDisplay.setPanel(element);”设置。
  • sry,面板由“directionsDisplay.setPanel(element);”定义
  • 他们不应该立即改变吗?
  • 也许,我的问题是,由于方向面板,我必须重新加载 jQuery Scroll 插件。这不适用于这些事件。我认为该事件是在加载所有内容之前触发的,因此 Scroll 插件不会获得新的内容高度...
  • 再次检查它是延迟,不知道我首先做错了什么......
猜你喜欢
  • 2011-07-25
  • 1970-01-01
  • 2011-10-10
  • 1970-01-01
  • 2023-04-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-15
  • 2013-12-27
相关资源
最近更新 更多