Google地图:如何通过拖放DirectionRender服务显示的路线来检测更改事件?

时间:2013-06-03 14:15:52

标签: google-maps-api-3

我正在使用谷歌地图作为一个分类案例。这是代码:

// create map
            var map = new google.maps.Map(document.getElementById("map_canvas"), $scope.map_options);
            var dirService= new google.maps.DirectionsService();
            var dirRenderer= new google.maps.DirectionsRenderer();
            var dirContainer=document.getElementById('dir-container');

             dirRenderer.setOptions({
                 draggable:true,
             });

             var showDirections = function(dirResult, dirStatus) {
            if (dirStatus != google.maps.DirectionsStatus.OK) {
                alert('Veuillez saisir des adresses valides');
                return;
              }
              // Show directions
            dirRenderer.setMap(map);
            dirRenderer.setDirections(dirResult);
            dirRenderer.setPanel(dirContainer);

        };
       dirService.route($scope.master, showDirections);

我想触发用户修改路线的事件。使用此选项拖放即可修改路径:

dirRenderer.setOptions({
                     draggable:true,
                 });

我怎样才能抓住这个事件。我的代码中已经有了这个事件:

   google.maps.event.addListener(dirRenderer, 'routeindex_changed', 
                    function() {  });   
  google.maps.event.addListener(dirRenderer, 'directions_changed', 
                    function() {  });

1 个答案:

答案 0 :(得分:2)

它在谷歌API方向示例中提供。 以下是拖动后触发事件的代码。

public function createSlider(Request $request)
{
    $input = Request::all();

    // Create slider
    $slider = Sliders::create($input);

    if (Input::hasFile('image')) {

        // Use the slider id
        $imageName = $slider->id . '.' .
            $request->file('image')->getClientOriginalExtension();

        $request->file('image')->move(
            base_path() . '/public/assets/image/', $imageName
        );

        $input->image = $imageName;

    }
    return redirect('/admin');
}

此外,如果您对computeTotalDistance函数感兴趣

       directionsDisplay.addListener('directions_changed', function() {
        computeTotalDistance(directionsDisplay.getDirections());
        console.log(directionsDisplay);
      });