如何通过单击Google Maps上的POI标记直接将目的地（航点）添加到路线

Question

我正在实现与Google地图相关的功能-行程计划，该功能可以使用户在Google地图上自定义自己的行程路线。 但是，我只是实现了允许用户通过将经/纬度提交到数据库来创建旅程的目的地（航点）的功能，然后在加载TripDetailed视图时在Google地图上显示这些航点数据。 当我看到公路旅行网站时，它具有非常酷的功能，可让用户通过单击Google Maps上的POI标记直接将目的地（路线点）添加到路线上，也就是说，当用户单击特定的POI时，它将生成一个带有“添加到行程”按钮的信息窗口。 当用户单击该按钮时，选定的POI将作为路标添加到现有的旅行路线中，而Google Map更新该旅行路线。

这是我的旅行计划视图

我想点击此POI，将其设置为当前路线中的一个航点

这是我的JS代码：

  //Calculate Destination and Display Route on the Google Maps function calculateDisplayRoute(directionsDisplay, directionsService) { var waypts = []; for (var i = 1; i < destinationcount - 1; i++) { //Get rid of the starting and ending point waypts.push({ location: new google.maps.LatLng(Lats[i], Lngs[i]), stopover: true }); } google.maps.event.addListener(map, 'click', function (event) { //I WANT TO IMPLETEMENT WHEN USER CLICK A POI MARKER ON MAP, IT CAN BE PUSH INTO THE waypts[] array waypts.push({ location: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()), stopover: true }); //alert(event.latLng.lat() + ", " + event.latLng.lng()); }); // Retrieve the start and end locations and create a DirectionsRequest using // DRIVING directions. directionsService.route({ origin: start, destination: end, waypoints: waypts, // Since we need to matching the order sequence with the list on the right, we do not need the optimized waypoints travelMode: 'DRIVING' }, function (response, status) { // Route the directions and pass the response to a function to create // markers for each step. if (status === 'OK') { directionsDisplay.setDirections(response); renderDirectionsPolylines(response); } else { if (status === 'ZERO_RESULTS') { window.alert('Directions request failed due to No route could be found between the origin and destination.'); for (i = 0; i < destinationcount - 1; i++) { var id = i + 1; document.getElementById("distance." + id).innerHTML = " Unable to get the distance from the next destination of the current trip."; } document.getElementById("distance." + destinationcount).innerHTML = " This is the end of your trip."; document.getElementById("totaldistance").innerHTML = " Unable to get the total distance of the current trip"; } if (status === 'UNKNOWN_ERROR') { window.alert('A directions request could not be processed due to a server error. The request may succeed if you try again.'); } if (status === 'REQUEST_DENIED') { window.alert('The webpage is not allowed to use the directions service.'); } if (status === 'OVER_QUERY_LIMIT') { window.alert('The webpage has gone over the requests limit in too short a period of time.'); } if (status === 'NOT_FOUND') { window.alert('At least one of the origin, destination, or waypoints could not be geocoded.'); } if (status === 'MAX_WAYPOINTS_EXCEEDED') { window.alert('Too many DirectionsWaypoints were provided in the DirectionsRequest. Up to 23 waypoints allowed in each request, plus the origin and destination.'); } if (status === 'INVALID_REQUEST') { window.alert('The DirectionsRequest provided was invalid.'); } } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

这是我的js代码，用于向当前行进路线添加新的目的地（航点），单击地图时可以获取经纬度，但是我不知道为什么不能将其推入waypoint []数组：

  //I WANT TO IMPLETEMENT WHEN USER CLICK A POI MARKER ON MAP, IT CAN BE PUSH INTO THE waypts[] array waypts.push({ location: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()), stopover: true }); //alert(event.latLng.lat() + ", " + event.latLng.lng()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

谁能给我一些有关如何在javascript中实现此功能的提示？ 非常感谢。

Answer 1

好的，我解决了这个问题。 只是使用ajax将lat / lng发布到控制器，但是我正在考虑如何直接分解折线，以任意顺序将航点添加到当前行程路线，而不是将其添加为最后一个行程目的地。

这是我更新的JS代码

  google.maps.event.addListener(map, 'click', function (event) { //Now we using ajax to pass the value from view to controller $.ajax({ type: "POST", dataType: "json", url: "/Account/AddMapDestination", data: { lat: event.latLng.lat(), lng: event.latLng.lng(), currentTripUid: '@Model.tripUID.ToString()' }, success: function (result) { if (result.success) { alert(result.responseText); location.reload(); //We do refresh page here to let page redener Destination result Panes with new sequence id. } else { alert(result.responseText); location.reload(); } }, error: function (result) { alert("Error, your trip destination order sequence has not been changed."); location.reload(); } }); // alert(event.latLng.lat() + ", " + event.latLng.lng()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>