谷歌地图API的方向服务;不起作用

Directions Service of Google Maps API doesn't work

本文关键字:不起作用 服务 方向 API 谷歌地图      更新时间:2023-09-26

你知道为什么我的谷歌地图API方向服务不起作用吗?方法directionsService.route((似乎没有执行(因为没有显示状态警报(,但我不知道为什么。我是谷歌地图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>

请求对象中的答案是打字错误的-travelmode而不是travelmode。此参数是必需的,因此不会执行result-route方法。小心这个名字!