可以对DirectionsRendererOptions Google Maps API进行抑制标记和拖动 [英] suppressMarkers and draggable for DirectionsRendererOptions Google Maps API
问题描述
我正在使用Google Maps API创建具有给定点的方向.
我需要将点定为1,2,3 ... 99(完成).
这些点也必须是可拖动的.
但是当我使这些点可拖动时,方向不会自动刷新,点的位置会改变,但方向不会改变,
以下是示例代码(摘自->
这是问题所在
问题是,我必须同时使用标记和可拖动属性.
预先感谢
每次拖动标记时,只需重新计算路线即可.侦听 dragend
事件,并再次计算路线,然后再次使用抑制标记将其呈现在地图上.不过请小心,如果将标记拖到无法计算路线的某个位置(例如,在海上或某些山脉等),则在重新计算路线时会出错.
工作示例:
function init(){var markers = [];vardirectionService =新的google.maps.DirectionsService();var pos = new google.maps.LatLng(41.218624,-73.748358);var myOptions = {变焦:15中心:pos,mapTypeId:google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('map'),myOptions);directionsDisplay = new google.maps.DirectionsRenderer({map:map,preventMarkers:true});directionsService.route({来源:纽约",目的地:芝加哥",航点:[{location:"Philadelphia"},{location:"Boston"}],//其他持续时间点optimizeWaypoints:正确,travelMode:google.maps.TravelMode.DRIVING},功能(响应,状态){如果(状态=== 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,地图,标记,directionsService,directionsDisplay);}addDraggableDirectionsMarker(my_route.legs [i-1] .end_location,i + 1,地图,标记,directionsService,directionsDisplay);} 别的 {vts.alertDialog(window.localization.error,window.localization.error_direction_calculate +:" +状态,BootstrapDialog.TYPE_DANGER);}});}函数addDraggableDirectionsMarker(位置,标签,地图,标记,directionsService,directionsDisplay){var marker = new google.maps.Marker({位置:位置,标签:" +标签,地图:可拖动:true});google.maps.event.addListener(marker,'click',function(){//做任何您想在标记上单击的操作});google.maps.event.addListener(marker,'dragend',function(){if(markers.length< 2)返回;var waypoints = [];for(var i = 1; i< markers.length-1; i ++)waypoints.push({location:markers [i] .getPosition()});directionsService.route({来源:markers [0] .getPosition(),目的地:markers [markers.length-1] .getPosition(),航点:航点,optimizeWaypoints:正确,travelMode:google.maps.TravelMode.DRIVING},功能(响应,状态){如果(状态=== google.maps.DirectionsStatus.OK){directionsDisplay.setDirections(response);//取消注释以下代码,如果希望拖动的标记捕捉到路线,最接近拖动标记的点/* 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);}标记[i] .setPosition(my_route.legs [i-1] .end_location); */} 别的 {vts.alertDialog(window.localization.error,window.localization.error_direction_calculate +:" +状态,BootstrapDialog.TYPE_DANGER);}});});markers.push(marker);}
<脚本类型="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>
I'm using Google Maps API to create a direction with the given points.
I need to order the points as 1,2,3...99 (It's done).
Also the points must be draggable.
But when I make the points draggable, the direction does not refresh itself, point's locations change but not the direction,
Here is the sample code(taken from the --> 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>
Here is the screen shots;
Here is the problem;
The thing is that, I have to do it with both markers and draggable properties.
Thanks in advance
Just recalculate the route every time a marker is dragged. Listen for the dragend
event and calculate route again and then render it on map, again with suppressing markers. Careful though, if you drag a marker to some position where route cannot be calculated (e.g. over sea, or some mountains, etc.) you would get error when re-calculating the route.
Working example:
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>
这篇关于可以对DirectionsRendererOptions Google Maps API进行抑制标记和拖动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!