ad0*_*d0R 3 javascript asp.net-mvc google-maps
我目前正在将地图 api 与 asp.net mvc5 结合使用。我的控制器将位置数据传递给我的视图,如下所示:
ViewBag.Origin = JsonConvert.SerializeObject(origin);
ViewBag.Destination = JsonConvert.SerializeObject(destination);
ViewBag.PositionEntries = JsonConvert.SerializeObject(mapsPositions);
Run Code Online (Sandbox Code Playgroud)
在视图中,我正在调用我的 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>
Run Code Online (Sandbox Code Playgroud)
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);
}
});
};
Run Code Online (Sandbox Code Playgroud)
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}]
Run Code Online (Sandbox Code Playgroud)
所以谷歌说:
// The below line is equivalent to writing:
// position: new google.maps.LatLng(-34.397, 150.644)
position: {lat: -34.397, lng: 150.644},
Run Code Online (Sandbox Code Playgroud)
现在我收到错误:InvalidValueError: in property waypoints: at index 0: unknown property lat。属性是否在引号中重要吗?或者我错过了什么?谢谢你的帮助。
该属性waypoints应包含具有以下结构的对象数组:
{
location: {lat: .., lng: ..},
....
}
Run Code Online (Sandbox Code Playgroud)
您当前的对象如下所示:
{
lat: ...,
lng: ...,
....
}
Run Code Online (Sandbox Code Playgroud)
您可以在文档中找到更多相关信息