javascript - 在 Google Map API 3 中清除方向服务的路线失败

Question

当我单击一个按钮通过清除标记和方向路线来重置地图时，我不确定用户是否已经创建了路线。如果在点击事件期间包含以下代码，我的功能将失效。但是如果这三个代码被删除，它就可以正常工作......

directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay.setDirections({routes: []});

执行上述代码前是否需要判断directionsDisplay是否为空？我的编码在下面提取以供您参考...非常感谢...

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var StartMarker = null;
var EndMarker = null;
var directionsVisible = false;
var oldDirections = [];
var currentDirections = null;

google.maps.event.addListener(map, 'click', function(event) {
    if (!StartMarker) {
        origin = event.latLng;

        lat = origin.lat();
        lng = origin.lng();
        /*If the origin is null, run UpdateLatLng() function to convert 
          the Lat, Lng of the mouse click position to Northing, Easting and
          assign the value to the textbox */
        UpdateLatLng();

        var startimage = 'images/Start4.png';
        StartMarker = new google.maps.Marker({
            map: map,
            position: origin,
            icon: startimage
        });
    } else {
        //Relocate the Starting point and assign the new position to Textbox
        alert ("The starting point was relocated on screen"); 
        StartMarker.setMap(null);
        if (EndMarker !==null) {
            EndMarker.setMap(null);
        };
        directionsDisplay.setMap(null);
        directionsDisplay.setPanel(null);
        directionsDisplay.setDirections({routes: []});
        var origin = event.latLng;
        lat = origin.lat();
        lng = origin.lng();
        UpdateLatLng();
        //StartMarker.setPosition(origin.getposition());
        var startimage = 'images/Start4.png';
        StartMarker = new google.maps.Marker({
            map: map,
            position: origin,
            icon: startimage
        });
    }
});

google.maps.event.addListener(directionsDisplay, 'directions_changed',
        function() {
            if (currentDirections) {
                oldDirections.push(currentDirections);
                setUndoDisabled(false);
            }
            currentDirections = directionsDisplay.getDirections();
            calcRoute();
        });
function calcRoute() {
    if (origin == null) {
        alert("Please input the starting point");
        return;
    }

    var mode;
    switch (document.getElementById("mode").value) {
        case "driving":
            mode = google.maps.DirectionsTravelMode.DRIVING;
            break;
        case "walking":
            mode = google.maps.DirectionsTravelMode.WALKING;
            break;
        case "transit":
            mode = google.maps.DirectionsTravelMode.TRANSIT;
            break;
    }

    var request = {
        origin: origin,
        destination: destination,
        waypoints: waypoints,
        travelMode: mode,
        optimizeWaypoints: document.getElementById('optimize').checked,
        avoidHighways: document.getElementById('highways').checked,
        avoidTolls: document.getElementById('tolls').checked
    };

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

        }
    });

    directionsVisible = true;
}

Answer 1

通过采用以下代码解决了该问题...

 if(directionsDisplay != null) { 
   directionsDisplay.setMap(null);
   directionsDisplay = null; }

Answer 2

directionsDisplay.setMap(null);
map.setZoom(8);
map.setCenter();