javascript - 属性 值无效 : undefined, 什么？

Question

我对我的 map 做了一些操作(不确定是什么)，现在正在运行的函数抛出以下错误:

Invalid value for property <travelMode>: undefined line 16 main.js

我做的最后一件事是添加以下行:

directionsDisplay.setPanel(document.getElementById("directions"));

这样我就可以在 div 中显示方向详细信息。这是我的引用代码:

// This function sets-up and initiates the Google maps interface
function load_map() {

    startLatLng = new google.maps.LatLng(52.485809,-1.888783);
    // create a new Google latLang marker object with co-ords for
    //the start location
    var config = {
        zoom: 5,
        center: startLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // create a JASON object to store map configruation

    map = new google.maps.Map(document.getElementById("map"), config);

    // intilise the map passing the display divs id and the config
    // object


    var startMarker = new google.maps.Marker({
        position: startLatLng,
        map: map
    })
    startMarker.setIcon('/imgs/startMarker.png');

    // create a new marker object for start (passing anonomus JASON
    // config object)
    startMarker.setMap(map);
    // Add the marker to the map
    geocodeAddress("ARM Ltd Rockingham Court 152 Rockingham Street Sheffield Great Britain");
    geocodeAddress("Centrum House 36 Station Road Egham Surrey");
    geocodeAddress("Pipers Way Swindon United Kingdom");
    // call the geocoding function to add markers to the map

}

/*
 * This function loads a marker overlay on to the location provided
 * and calls the addInfoWindow function to add an info window to it
 * @param a location: google location object representing the location at which
 * the marker is to be placed
 * @param a windowText: String variable representing the information to be attached
 * to the window.
 */

function loadMarker(location,windowText,address) {
    var tempMarker = new google.maps.Marker({
        position: location,
        map: map,
        address:address, 
        selected:"false"
    });
    google.maps.event.addListener(tempMarker, 'click',function(){
        selectLocation(tempMarker);
    });
    google.maps.event.addListener(tempMarker, 'dblclick',function(){

        deselectLocation(tempMarker);
    });
    addInfoWindow(windowText,tempMarker,tempMarker.address);
    // add an information window anchored on the marker
    tempMarker.setIcon('/imgs/workofficeMarker.png');
    markersArray.push(tempMarker);
    tempMarker.setMap(map); 
    // add the marker to the map at this location
}



/*
 * A function to geocode the string type address passed into usable
 * lat lng type co-ords
 * @param address: a String representing the address to be geocoded
 */

function geocodeAddress (address) {

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            loadMarker(results[0].geometry.location,"Info here",address);
            latlngArray.push(results[0].geometry.location);
        } else {
            alert("Geocode was not successful for the following reason: " +" "+  status);
        }
    });
}

/*
 * This function adds an info window to each marker and allows it
 * to be activated on click.
 * @Param infoText: a String representing the data to be included in the
 * info window
 * @Param marker: a Google Marker Object to attach the Text Window to.
 */

function addInfoWindow (infoText,marker) {


    var contentString = '<div id = "windowContent">'+ 
        '<h4> Details</h4>'+'</div>'+
        '<div id ="windowContent">'
        +'</br>'
        +infoText
        + '</br>'
        + '<p><label for="mapsUkSaddr">Your address</label> <form action="http://maps.google.co.uk/maps" method="get" target="_blank">'
        + '<input type="text" name="saddr" id="mapsUkSaddr" value="" size="20"/>'
        + '<input type="submit" value="Get directions" />'
        +'<input type="hidden" name="daddr" value='  + '\"'+ marker.address +'\"' + '/>'
        +'<input type="hidden" name="hl" value="en" /> </p>'
        + '</form>'
        + '</div>';
    var tempInfoWindow = new google.maps.InfoWindow({
        content: contentString
    });
    google.maps.event.addListener(marker,'rightclick', function() {
        tempInfoWindow.open(map,marker);
    });
}

/*
 * A function to resize the bounds of the map to fit selected locations
 *              
 */

function getSelected () {

    if (markersArray.length == 0) {
        return -1;
    }

    else {
        selectedMarkersAdds = new Array();
        for (var i = 0; i < markersArrayAdds.length; i++) {
            if ( markersArray[i].selected == "true") {
                selectedMarkersAdds.push( markersArray[i].address)
            }
        }
        return  selectedMarkersAdds;
    }
}

function sizeMap() {
    var bounds = new google.maps.LatLngBounds();

    for ( var i = 0; i < 1; i++) {
        alert(latlngArray[i]);
        var tempLatLng = new google.maps.LatLng(latlngArray[i]);
        alert(tempLatLng);
        bounds.extend(tempLatLng);
    }
      map.fitBounds(bounds);
}

/*
 * This function allow a given location to be selected as a potential
 * vist location. The location is added to the selected array to 
 * allow resizing and changes the icons colour to show selection
 * @param a marker: Google maps Marker object representing the marker to be
 * selected.
 */

function selectLocation (marker) {

    var markerIndex = checkForMarker(marker);
    if (markerIndex == -1) {
        alert ("Marker specified in selection not found");
        return;
    } 
    else {
        markersArray[markerIndex].selected = "true";
        markersArray[markerIndex].setIcon('/imgs/workofficeRedMarker.png'); 
        return;
    }
}


/*
 * Allows the specified marker to be deselected
 * @param marker: a Google Maps marker object representing the marker
 * to be deselected
 */

function deselectLocation (marker) {

    var markerIndex = checkForMarker(marker);

    if (markerIndex == -1) {
        alert ("Marker specified in deselection not found");
        return;
    } 

    else {
        markersArray[markerIndex].selected = "false";
        markersArray[markerIndex].setIcon('/imgs/workofficeMarker.png');
        return;
    }
}

/*
 * This function allows a route to be calculated to each location 
 * selected and displayed: Google maps LatLng object representing the start of the route
 * @param a endLocation: Google maps LatLng object representing the end of the route
 */

function calculateRoot (startLocation,endLocation) {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directions"));

    var request = {
        origin:startLocation,
        destination:endLocation,
        provideRouteAlternatives: true
    };   
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);

        }
    });
}

/*
 * This function shows the route from the chosen start location
 * to all of the avaliable placement locations 
 */

function showSpiderView(){
    for (var i = 0; i<latlngArray.length; i++ ) {
        calculateRoot(startLatLng,latlngArray[i]); 
    }
    sizeMap();
}

/*
 * This function allows the selectedLocations array to be checked 
 * to see if a fiven marker has already been selected
 * @param marker: A Google maps marker type object to be searched for
 * @return integer value of array postion if marker is found -1 otherwise 
 */

function checkForMarker (marker) {

    if (markersArray.length !=0){
        for (var i = 0; i < markersArray.length; i++ ) {
            if (marker.address == markersArray[i].address){
                return i
            }
        }
    }
    else {
        return -1;
    }
}

/*
 * Display only placement locations that have been selected by the
 * user
 */

function showOnlySelected () {
    clearMarkers();
    if (markersArray.length != 0) {
        for (var i = 0; i < markersArray.length; i ++ ) {
            if (markersArray[i].selected == "true") {
                markersArray[i].setMap(map);
            }
        }
    }

    else {
        alert ("No locations are avaliable to show");
        return;
    }
}
/*
 * A function to allow all placement locations to be displayed
 */
function showAll () {
    clearMarkers();
    if (markersArray != 0) {
        for (var i = 0; i < markersArray.length; i ++) {
            markersArray[i].setMap(map);
        }
    }
    else  {
        alert ("No markers found to display")
        return;
    }
}

/*
 * A function to allow all markers to be cleared from the screen
 */
function clearMarkers () {
    if (markersArray.length != 0) {
        for (var i = 0; i < markersArray.length; i ++) {
            markersArray[i].setMap(null);
        }
    }
    else {
        alert ("No markers avaliable to clear");
    }
}

// initilise all the page components by calling there load functions
function init () {
    load_grid();
    load_map();
}

昨晚似乎在工作，但在停止工作之前我必须改变一些东西。 (这将教会我不要在凌晨 2:00 疲倦地编码:-))各位好心人能指点一下吗？

按照要求，第 16 行内容如下:

J.toSpan=function(){return new P(this.$[Ta]()?0:this.$.d-this.$.b,ge(this.ba),i)};na(J,function(){return this.$[Ta]()||this.ba[Ta]()});function je(a,b){return function(c){if(!b)for(var d in c)a[d]||aa(ia("Unknown property <"+(d+">")));var e;for(d in a)try{var f=c[d];if(!a[d](f)){e="Invalid value for property <"+(d+(">: "+f));break}}catch(g){e="Error in property <"+(d+(">: ("+(g[dc]+")")));break}e&&aa(ia(e));return i}}function ke(a){return a==j}function le(a){try{return!!a.cloneNode}catch(b){return k}}function me(a,b){var c=Kd(b)?b:i;return function(b){return b==j&&c||b instanceof a}}

一直在尝试弄清楚它的含义，但无法充分理解它，认为它可能与 JSON 请求对象有关，但我不确定

Answer 1

您的请求

var request = {
    origin:startLocation,
    destination:endLocation,
    provideRouteAlternatives: true
};

还应该指定travelMode，例如

    travelMode: google.maps.DirectionsTravelMode.DRIVING

http://code.google.com/apis/maps/documentation/javascript/reference.html#DirectionsRequest