javascript - 调用 Google map DirectionsService 时未捕获的异常

Question

我收到一个 Uncaught InvalidValueError: in property origin: not a string;当我调用 Google map 路线服务时，不是 LatLng 或 LatLngLiteral: not an Object 错误 - 即使如此，路线似乎已添加到 map 中？

以下函数调用当前位置 (currentPos) 和不太远的位置 (LatLng(52.705151, -2.741861)) 之间的路线服务

    function calcRoute() {
    var start = currentPos;
    var end = new google.maps.LatLng(52.705151, -2.741861);
    var request = {
        origin: start,
        destination: end,
        travelMode: google.maps.TravelMode.WALKING
    };
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

以下是初始化 map 并调用 calcRoute() 函数的代码:

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

var currentPos;
var destinationPos;

var map;

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
        zoom: 14
    };

    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);

    directionsDisplay.setMap(map);

    var infoWindow = new google.maps.InfoWindow();

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            currentPos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

            var marker = new google.maps.Marker({
                position: currentPos,
                map: map,
                title: "You are here"
            });

            marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

            map.setCenter(currentPos);

            $.ajax({
                type: 'GET',
                url: $('#AddMarkersToMap').val(),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    addMarkers(data, infoWindow);
                },
                error: function () {
                    alert("Error");
                }
            });


        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        handleNoGeolocation(false);
    }

    calcRoute();


}

一些谷歌搜索表明异常可能是由于 map 尚未加载而引起的，因此我尝试像这样进行 calcRoute 调用，但这没有帮助:

    $(function () {
        calcRoute()
    });

Answer 1

当您调用 calcRoute 时，您的 currentPos 变量未定义。
getCurrentPosition 是异步的，不会在 calcRoute 之前执行，因此不会设置 currentPos。
如果您需要在 calcRoute 中使用 currentPos，您应该在 getCurrentPosition 的回调中调用它，以确保它已被定义。

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        currentPos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

        var marker = new google.maps.Marker({
            position: currentPos,
            map: map,
            title: "You are here"
        });

        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

        map.setCenter(currentPos);

        $.ajax({
            type: 'GET',
            url: $('#AddMarkersToMap').val(),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                addMarkers(data, infoWindow);
            },
            error: function () {
                alert("Error");
            }
        });
        calcRoute();
        //\\//\\//\\
    }, function () {
        handleNoGeolocation(true);
    });