javascript - Google map 中的航点 : InvalidValueError: in property waypoints: at index 0: unknown property lat

Question

我目前正在将 map api 与 asp.net mvc5 结合使用。我的 Controller 将位置数据传递到我的 View ，如下所示:

ViewBag.Origin = JsonConvert.SerializeObject(origin);
ViewBag.Destination = JsonConvert.SerializeObject(destination);
ViewBag.PositionEntries = JsonConvert.SerializeObject(mapsPositions);

在 View 内，我调用 js 文件并将 Viewbags 的值传递给它。

<script>
var origin = @Html.Raw(ViewBag.Origin)
var destination = @Html.Raw(ViewBag.Destination)
var mapsPositions = @Html.Raw(ViewBag.PositionEntries)
</script>
<script>
initMap(origin, destination, mapsPositions);
</script>

JavaScript 文件:

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


calculateAndDisplayRoute(directionsService, directionsDisplay, origin, destination, mapsPositions);})

function calculateAndDisplayRoute(directionsService, directionsDisplay, origin, destination, mapsPositions) {
var waypts = mapsPositions;


directionsService.route({
    origin: origin,
    destination: destination,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
}, function (response, status) {
    if (status === 'OK') {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
        var summaryPanel = document.getElementById('directions-panel');
        summaryPanel.innerHTML = '';
        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
            var routeSegment = i + 1;
            summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
                '</b><br>';
            summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
            summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
            summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        }
    }
    else {
        window.alert('Directions request failed due to ' + status);
    }
});
};

Json 对象:

[{"lat":54.1766472,"lng":9.092599,"stopover":false},{"lat":54.1700745,"lng":9.090693,"stopover":false},{"lat":54.1973152,"lng":9.045031,"stopover":false},{"lat":54.27517,"lng":9.00978851,"stopover":false},{"lat":54.4802246,"lng":9.087988,"stopover":false}]

Google 的意思是:

// The below line is equivalent to writing:
// position: new google.maps.LatLng(-34.397, 150.644)
position: {lat: -34.397, lng: 150.644},

现在我收到错误:InvalidValueError:在属性航点中:在索引 0 处:未知属性纬度。该属性是否用引号引起来有什么关系吗？或者我错过了什么？感谢您的帮助。

Answer 1

属性waypoints应包含具有以下结构的对象数组:

{
   location: {lat: .., lng: ..},
   ....
}

您当前的对象如下所示:

{
  lat: ...,
  lng: ...,
  ....
}

您可以在DOCUMENTATION中找到更多相关信息。