谷歌在地图上映射明确的方向

Question

＆＃13;

＆＃13;

   $scope.addMarker = function (places) {
        $scope.markers = [];

        $.each(places, function (key, value) {
            var marker = new google.maps.Marker({
                position: {lat: value.latitude, lng: value.longitude},
                map: $scope.map,
                title: value.el_name
            });

            var contentString = "<h2>" + value.el_name + "</h2>"
                + "<address class='pull-right'>" + value.Address + "</address>"
                + "<div class='clearfix'></div>"
                + "<p class='text-justify'>" + value.description + "</p>"
                + "<iframe width='560' height='315' src='https://www.youtube.com/embed/" + value.video_id + "' frameborder='0' allowfullscreen></iframe> ";

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            marker.addListener('click', function () {
                infowindow.open($scope.map, marker);
            });
            $scope.markers.push(marker)
        });

        $scope.showItems = function () {
            $scope.removeMarkers($scope.markers);
            $scope.removeMarkers($scope.places);
            $scope.clearDirection();
            console.log($scope.directionsDisplay);
            $scope.addMarker($scope.filteredItems);
        }

    };

    $scope.getDirection = function (loc) {
        if (!$('#address').val == "") {

            $scope.removeMarkers($scope.markers);
            $scope.removeMarkers($scope.placesMarkers);
            $scope.directionsDisplay[$scope.currentDisplay] = new google.maps.DirectionsRenderer;
            $scope.directionsService = new google.maps.DirectionsService;
            $scope.map.panTo(loc);


            var marker = new google.maps.Marker({
                position: loc,
                map: $scope.map
            });
            $scope.directionsDisplay[$scope.currentDisplay].setMap($scope.map);
            $scope.directionsDisplay[$scope.currentDisplay].setPanel(document.getElementById('right-panel'));


            $scope.calculateAndDisplayRoute($scope.directionsService, $scope.directionsDisplay[$scope.currentDisplay], loc);

            document.getElementById('mode').addEventListener('change', function() {
                $scope.calculateAndDisplayRoute($scope.directionsService, $scope.directionsDisplay[$scope.currentDisplay], loc);
            });
        }
        else {
            window.alert("Enter an address")
            $('#address').focus();
        }
    }

    $scope.showDirection = function (loc) {
        $('#right-panel').html('');
        $('#right-panel').hide();

        $('#floating-panel-address').show();
        $('#floating-panel').show();
        $('#address').focus();

        $('#submit').bind('click', function () {
            $scope.getDirection(loc);
        })
        $scope.currentDisplay++;

    };
    $scope.clearDirection = function () {
        for (var i = 0; i < $scope.directionsDisplay.length; i++) {
            if (!($scope.directionsDisplay[i] == null))
                $scope.directionsDisplay[i].set('directions', null);
        }
    }

    $scope.calculateAndDisplayRoute = function (directionsService, directionsDisplay, loc) {
        var selectedMode = document.getElementById('mode').value;
        var address = document.getElementById('address').value;
        var source = loc;
        var dest = address;
        if ($("input[name='direction']:checked").val() == "going") {
            source = address;
            dest = loc;
        }
        directionsService.route({
            origin: source,  // Haight.
            destination: dest,  // Ocean Beach.
            // Note that Javascript allows us to access the constant
            // using square brackets and a string value as its
            // "property."
            travelMode: google.maps.TravelMode[selectedMode]
        }, function (response, status) {
            if (status == 'OK') {
                $('#right-panel').show();
                directionsDisplay.setDirections(response);
                // console.log("in calc... counter increased here \n", $scope.directionsDisplay);
            } else {
                window.alert('Directions request failed due to ' + status);
            }
        });
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
    <div style="position:relative;">
        <div id="floating-panel" hidden>
            <b>Mode of Travel: </b>
            <select id="mode">
                <option value="DRIVING">Driving</option>
                <option value="WALKING">Walking</option>
                <option value="BICYCLING">Bicycling</option>
                <option value="TRANSIT">Transit</option>
            </select>
        </div>
        <div id="floating-panel-address" hidden>
            <span class="routeSelection"><input type="radio" name="direction" id="source" value="going" checked="checked"/>Going to College</span><span class="routeSelection"><input type="radio" name="direction" id="destination" value="coming"/>Coming from College</span><br/>
            <input type="text" placeholder="Address" id="address" ng-model="address" />
            <button id="submit" ng-click="getDirection()">Get Direction</button>
        </div>
        <div id="right-panel" hidden></div>
    </div>
    <div id="mapContainer">
        <div id="stationMap"></div>
     </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我一直在努力做一些我认为应该是基本的事情。我有一个Web项目，应该显示两点之间的方向。然而，这是一个功能。另一个功能从json文件填充地图上的标记。我试图清除地图上显示的方向但它似乎没有清除方向。我使用了directionrenderer.setMAp（null）没有用。我假设如果我得到多个方向，它会创建多个directionrenderer实例。如何清除显示的所有方向？我不得不尝试一个阵列，也许它会捕捉所有方向，但它仍然无法正常工作

$scope.clearDirection = function () {
    for (var i = 0; i < $scope.directionsDisplay.length; i++) {
        if (!($scope.directionsDisplay[i] == null))
            $scope.directionsDisplay[i].setMap(null);
    }
}