谷歌地图api没有返回lat和lng值？

Question

这是截图。通常，谷歌地图会返回旅程步骤的纬度值。现在所有重新调整都是function()。我该如何解决？

我还没有更改任何代码，为什么还没有返回lat lng值？

Answer 1

因此，基于Google Maps API参考（https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsService），start_location返回<LatLng>类型。 LatLng类有[{1}}和lat()方法，可以在lng()中获取lat / lng值。

Answer 2

您可以使用google.maps.LatLng type的那些值 lat() / lng()用于获取纬度/经度值，toString() / toUrlValue()用于获取字符串表示。

以下示例显示如何打印路线信息，包括lat＆amp;来自路线服务响应

的google.maps.LatLng lng属性

function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: { lat: 41.85, lng: -87.65 }
    });
    directionsDisplay.setMap(map);

    var onChangeHandler = function () {
        calculateAndDisplayRoute(directionsService, directionsDisplay);
    };
    document.getElementById('start').addEventListener('change', onChangeHandler);
    document.getElementById('end').addEventListener('change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
        origin: document.getElementById('start').value,
        destination: document.getElementById('end').value,
        travelMode: google.maps.TravelMode.DRIVING
    }, function (response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            if(response.routes.length > 0)
                printRoute(response.routes[0]);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}


function printRoute(route)
{
    var json = JSON.stringify(route, convertLatLngValue, 2);
    document.getElementById('output').innerHTML = json;
}


function convertLatLngValue(key,value)
{
    if (key=="lat" || key=="lng") {
        return value();
    }    
    else 
        return value;
}

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }

        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto','sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #map-container {
            width: 64.9%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            float: right;
            z-index: 0;
        }

        #panel {
            float: left;
            width: 35%;
            height: 400px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
            outline: 1px solid rgba(0,0,0,0.2);
            z-index: 100;
            overflow: auto;
        }

 <div id="panel">
            <pre id="output"></pre>
 </div>
 <div id="map-container">
            <div id="floating-panel">
                <b>Start: </b>
                <select id="start">
                    <option value="chicago, il">Chicago</option>
                    <option value="st louis, mo">St Louis</option>
                    <option value="joplin, mo">Joplin, MO</option>
                    <option value="oklahoma city, ok">Oklahoma City</option>
                    <option value="amarillo, tx">Amarillo</option>
                    <option value="gallup, nm">Gallup, NM</option>
                    <option value="flagstaff, az">Flagstaff, AZ</option>
                    <option value="winona, az">Winona</option>
                    <option value="kingman, az">Kingman</option>
                    <option value="barstow, ca">Barstow</option>
                    <option value="san bernardino, ca">San Bernardino</option>
                    <option value="los angeles, ca">Los Angeles</option>
                </select>
                <b>End: </b>
                <select id="end" >
                    <option value="chicago, il">Chicago</option>
                    <option value="st louis, mo">St Louis</option>
                    <option value="joplin, mo">Joplin, MO</option>
                    <option value="oklahoma city, ok">Oklahoma City</option>
                    <option value="amarillo, tx">Amarillo</option>
                    <option value="gallup, nm">Gallup, NM</option>
                    <option value="flagstaff, az">Flagstaff, AZ</option>
                    <option value="winona, az">Winona</option>
                    <option value="kingman, az">Kingman</option>
                    <option value="barstow, ca">Barstow</option>
                    <option value="san bernardino, ca">San Bernardino</option>
                    <option value="los angeles, ca">Los Angeles</option>
                </select>
            </div>
            <div id="map"></div>
 </div>
          
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
                async defer></script>