我使用两个标记来获取距离 A 和 B
Javascript:
var rendererOptions = {
draggable: true
};
var Mapa = {
// HTML Nodes
mapContainer: document.getElementById('mapa'),
dirContainer: document.getElementById('trasa'),
fromInput: document.getElementById('from-input'),
toInput: document.getElementById('to-input'),
travelModeInput: document.getElementById('travel-mode-input'),
unitInput: document.getElementById('unit-input'),
// API Objects
dirService: new google.maps.DirectionsService(rendererOptions),
dirRenderer: new google.maps.DirectionsRenderer(rendererOptions),
map: null,
showDirections: function(dirResult, dirStatus) {
if (dirStatus != google.maps.DirectionsStatus.OK) {
alert('Não há resultados!');
return;
}
// Show directions
Mapa.dirRenderer.setMap(Mapa.map);
Mapa.dirRenderer.setPanel(Mapa.dirContainer);
Mapa.dirRenderer.setDirections(dirResult);
},
getSelectedTravelMode: function() {
var value = Mapa.travelModeInput.options[Mapa.travelModeInput.selectedIndex].value
if (value == 'driving') {
value = google.maps.DirectionsTravelMode.DRIVING;
} else {
alert('Unsupported travel mode.');
}
return value;
},
getDirections: function() {
var fromStr = Mapa.fromInput.value;
var toStr = Mapa.toInput.value;
var dirRequest = {
origin: fromStr,
destination: toStr,
travelMode: Mapa.getSelectedTravelMode(),
provideRouteAlternatives: true,
};
Mapa.dirService.route(dirRequest, Mapa.showDirections);
},
init: function() {
var latLng = new google.maps.LatLng(38.6978, -27.1624);
Mapa.map = new google.maps.Map(Mapa.mapContainer, {
zoom: 15,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Show directions onload
Mapa.getDirections();
}
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', Mapa.init);
我只想将第二个标记 (B) 固定,不可拖动。
有什么想法吗?
基于此:http://webhost.home.pl/piotr/google_maps_test/index.html
最佳答案
一种选择是自己渲染方向,使其中一个标记可拖动,而另一个则不可拖动。缺点是您无法拖动路线来更改它(除非您也自己实现;您可能可以在 API 中发布 native 可拖动方向之前找到相关示例)。
working example (起始位置为绿色)
另一个选项:使用可拖动方向,但抑制标记。使用如上例所示的标记:
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable:true,
suppressMarkers: true
});
关于javascript - Google map api v3 两个标记,一个固定,一个拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16966766/