Google Maps API 的路线服务不起作用

Question

您知道为什么我的 Google Maps API 路线服务不起作用吗？似乎没有执行方法 commandsService.route() （导致未显示状态警报），但我不知道为什么。我是 Google Maps API 和 JS 的新手，所以如果它很简单，请尽量宽容。 :)

var map = null;
var pos = null;
const STORED_LOC = new google.maps.LatLng(50.405196, 11.894855);
var currentLat = document.getElementById("latLabel");
var currentLng = document.getElementById("lngLabel");
var additionalInfo = document.getElementById("additionalInfo");

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize()
{
    pos = STORED_LOC;
    currentLat.innerHTML = pos.lat();
    currentLng.innerHTML = pos.lng();

    options =
        {
            center: pos,
            zoom: 15
        }

    marker = new google.maps.Marker(
        {
            position: pos,
            map: map,
            title: "Chosen localization"
        }
    );

    map = new google.maps.Map(document.getElementById("mapContainer"), options);
    marker.setMap(map);

    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
}

$("#yes").click(function () {
    getPosition();
    hideUserConsentSection();
});

$("#no").click(function () {
    hideUserConsentSection();
    showSetCustomLocationSection();
});

function showSetCustomLocationSection() {
    $("#setCustomLocationSection").show();
}

function hideUserConsentSection() {
    $("#userConsentSection").hide();
}

function getPosition() {

    if (navigator.geolocation) {
        var options = {
            enableHighAccuracy: true,
            timeout: 20000,
            maximumAge: 2000
        }

        navigator.geolocation.getCurrentPosition(showPosition, errorPosition, options);
    }

    else
    {
        additionalInfo.innerHTML += "Your browser doesn't support geolocation";
    }
}

function showPosition(position) {

    pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    currentLat.innerHTML = pos.lat();
    currentLng.innerHTML = pos.lng();

    var request =
        {
            origin: STORED_LOC,
            destination: pos,
            travelmode: google.maps.TravelMode.DRIVING
        }
    directionsService.route(request, function(result, status)
    {
        alert(status);
        if (status == google.maps.DirectionsStatus.OK)
        {
            alert("OKAY");
            directionsDisplay.setDirections(result);
        }
    });
    //map = new google.maps.Map(document.getElementById("mapContainer"), options);
    //marker.setMap(map);

}

function errorPosition(position) {
    switch (position.code) {
        case 1:
            showSetCustomLocationSection();
            break;
        case 2:
            showSetCustomLocationSection();
            break;
        case 3:
            showSetCustomLocationSection();
            break;
        default:
            break;
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

我的 HTML 看起来像这样：

<h3>How to reach us?</h3>

<div id="userConsentSection">Can we use your geolocation?<br />
     <input type="button" id="yes" value="Yes" />
    <input type="button" id="no" value="No" /><br /><br />
</div>

<div id="setCustomLocationSection" style="display:none">
    Enter your geolocation. <br /><br />
    <input type="text" id="customLocation" />
    <input type="button" id="setCustomLocationButton" value="Show" /><br /><br />
</div>

<span>Latitude: </span>
<div id="latLabel">
</div>

<span>Longitude: </span>
<div id="lngLabel">
</div>

<div id="additionalInfo">
</div>

<div id="mapContainer" style="height: 400px; width: 100%">

</div>

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=XXXX&sensor=true">
</script>

Answer 1

答案是请求对象中的拼写错误 - travelmode 而不是 travelMode。此参数是必需的，因此不会执行路由方法。小心那个名字！