调用 Google 地图方向服务时出现未捕获的异常

Question

我在调用 Google 地图路线服务时遇到 Uncaught InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object 错误 - 尽管如此，路线似乎已添加到地图中？

这是在当前位置 (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);
        }
    });
}

这是初始化地图并调用 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();


}

一些谷歌搜索表明异常可能是因为地图没有加载所以我尝试像这样调用 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);
    });

调用 Google 地图方向服务时出现未捕获的异常

Uncaught exception when calling Google maps directionsService

javascript

google-maps-api-3

uncaught-exception