在谷歌地图API 3中清除方向服务的路由失败



当我点击按钮通过清除标记和方向路由来重置地图时,我不确定用户是否已经创建了路由。如果在单击事件期间包含以下代码,则我的函数将死亡。但如果这三个代码被删除,它会正常工作…

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

在执行上述代码之前,是否需要确定directionsDisplay是否为null ?我的代码摘录如下供您参考…非常感谢…

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

采用以下代码解决此问题…

 if(directionsDisplay != null) { 
   directionsDisplay.setMap(null);
   directionsDisplay = null; }
directionsDisplay.setMap(null);
map.setZoom(8);
map.setCenter();

最新更新