我正在使用 Google Maps API 根据给定点创建方向。
我需要将点数排序为 1,2,3...99(已完成)。
此外，这些点必须是可拖动的。
但是当我使点可拖动时，方向不会自行刷新，点的位置会改变但方向不会改变，
这里是示例代码(取自 --> Google Maps Directions using 1-2-3 instead of A-B-C )；
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
function init(){
directionsService = new google.maps.DirectionsService();
var pos = new google.maps.LatLng(41.218624, -73.748358);
var myOptions = {
zoom: 15,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer({map: map, suppressMarkers: true,draggable:true});
directionsService.route({
origin: "New York",
destination: "Chicago",
waypoints: [{location:"Philadelphia"}, {location:"Boston"}], //other duration points
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var my_route = response.routes[0];
for (var i = 0; i < my_route.legs.length; i++) {
var marker = new google.maps.Marker({
position: my_route.legs[i].start_location,
draggable:true,
label: ""+(i+1),
map: map
});
}
var marker = new google.maps.Marker({
position: my_route.legs[i-1].end_location,
draggable:true,
label: ""+(i+1),
map: map
});
} else {
vts.alertDialog( window.localization.error,
window.localization.error_direction_calculate + ": " + status,
BootstrapDialog.TYPE_DANGER);
}
});
}
</script>
<body style="margin:0px; padding:0px;" onload="init()">
<div id="map" style="height:400px; width:500px;"></div>
</body>
这是屏幕截图；
问题就在这里；
问题是，我必须使用标记和可拖动属性来完成此操作。
提前致谢
最佳答案
只需在每次拖动标记时重新计算路线即可。监听 dragend 事件并再次计算路线，然后将其渲染在 map 上，再次使用抑制标记。但要小心，如果您将标记拖动到无法计算路线的某个位置(例如海上或某些山脉等)，则在重新计算路线时会出现错误。
工作示例:
function init(){
var markers = [];
var directionsService = new google.maps.DirectionsService();
var pos = new google.maps.LatLng(41.218624, -73.748358);
var myOptions = {
zoom: 15,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer({map: map, suppressMarkers: true});
directionsService.route({
origin: "New York",
destination: "Chicago",
waypoints: [{location:"Philadelphia"}, {location:"Boston"}], //other duration points
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var my_route = response.routes[0];
for (var i = 0; i < my_route.legs.length; i++) {
addDraggableDirectionsMarker(my_route.legs[i].start_location, i+1, map, markers, directionsService, directionsDisplay);
}
addDraggableDirectionsMarker(my_route.legs[i-1].end_location, i+1, map, markers, directionsService, directionsDisplay);
} else {
vts.alertDialog( window.localization.error,
window.localization.error_direction_calculate + ": " + status,
BootstrapDialog.TYPE_DANGER);
}
});
}
function addDraggableDirectionsMarker(position, label, map, markers, directionsService, directionsDisplay){
var marker = new google.maps.Marker({
position: position,
label: "" + label,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'click', function(){
//do whatever you want on marker click
});
google.maps.event.addListener(marker, 'dragend', function(){
if(markers.length < 2) return;
var waypoints = [];
for(var i = 1; i < markers.length - 1; i++) waypoints.push({location:markers[i].getPosition()});
directionsService.route({
origin: markers[0].getPosition(),
destination: markers[markers.length-1].getPosition(),
waypoints: waypoints,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
//uncomment following code if you want the markers you dragged to snap to the route, closest to the point where you dragged the marker
/*var my_route = response.routes[0];
for (var i = 0; i < my_route.legs.length; i++) {
markers[i].setPosition(my_route.legs[i].start_location);
}
markers[i].setPosition(my_route.legs[i-1].end_location);*/
} else {
vts.alertDialog( window.localization.error,
window.localization.error_direction_calculate + ": " + status,
BootstrapDialog.TYPE_DANGER);
}
});
});
markers.push(marker);
}<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" onload="init()">
<div id="map" style="height:400px; width:500px;"></div>
</body>关于javascript - DirectionsRendererOptions Google map API 的压制标记和可拖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37827746/