用于 DirectionsRendererOptions Google Maps API 的 suppressMarkers 和可拖动答案

【问题标题】：suppressMarkers and draggable for DirectionsRendererOptions Google Maps API用于 DirectionsRendererOptions Google Maps API 的 suppressMarkers 和可拖动
【发布时间】：2016-10-16 02:45:12
【问题描述】：

我正在使用 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>

这是屏幕截图；

这就是问题所在；

问题是，我必须同时使用标记和可拖动属性。

提前致谢

【问题讨论】：

我无法将市场与 onDrag 联系起来，也找不到任何 API 来执行此操作。你有什么想法吗？谢谢。
stackoverflow.com/questions/5688745/…

标签： javascript google-maps google-maps-api-3

【解决方案1】：

只需在每次拖动标记时重新计算路线。监听dragend 事件并再次计算路线，然后在地图上渲染它，再次使用抑制标记。不过要小心，如果您将标记拖到无法计算路线的位置（例如，在海上或某些山脉等），您会在重新计算路线时出错。

工作示例：

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>

【讨论】：

如果您将标记拖离街道（在公园或建筑物上），路线将被重新计算，但标记会停留在那里，这看起来有点奇怪......
我已经编辑了代码，以包含一段代码，该代码会将拖动的标记移动到最接近拖动位置的路线上的位置（将它们捕捉到路线）。我已经留下了评论，因为它并不总是理想的行为。但感谢您的反馈。