O Google Maps API direçõesRerendroptions não está funcionando?
-
20-09-2019 - |
Pergunta
Estou tentando usar o DireectionsRender para exibir um DireçãoResult sem a lista de rota. De acordo com a documentação da versão 3 da API, existe uma propriedade "Hideroutelist" do objeto DirectionsRendeRoptions que, quando definido como True, deve ocultar a lista de rota. Eu não posso fazer isso funcionar. Isso é um bug ou não estou codificando isso corretamente? A seguir está o meu código.
<html>
<head>
<title>Driving Directions</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
<!--
function initialize() {
var dirService = new google.maps.DirectionsService();
var dirRequest = {
origin: "350 5th Ave, New York, NY, 10118",
destination: "1 Wall St, New York, NY",
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL,
provideTripAlternatives: true
};
dirService.route(dirRequest, showDirections);
}
function showDirections(dirResult, dirStatus) {
if (dirStatus != google.maps.DirectionsStatus.OK) {
alert('Directions failed: ' + dirStatus);
return;
}
var rendererOptions = {
hideRouteList: true
};
var dirRenderer = new google.maps.DirectionsRenderer(rendererOptions);
dirRenderer.setPanel(document.getElementById('dir-container'));
dirRenderer.setDirections(dirResult);
}
-->
</script>
</head>
<body onLoad="initialize();">
<div id="dir-container"></div>
</body>
</html>
Solução
EU Tentei isso E eu não acho que você esteja fazendo algo errado. Parece que essa opção está quebrada. Eu não consegui encontrá -lo no questões conhecidas, então eu acho que isso é novo. Quando tiver uma chance, vou escrever.
Outras dicas
Eu acho que você está entendendo mal a documentação, ou talvez eu esteja entendendo mal sua pergunta!
HIDEROUTELIST: True oculta opções de rota, não a marcação de rota. Isso se aplica apenas em conjunto com a configuração do ProviderAlternatives: true no objeto Solicitação, que você também forneceu.
Abaixo está o meu teste rápido. Defina o HIDEROUTELIST como TRUE/FALSE para ver a diferença na marcação de rota abaixo. No meu caso, não há opções de rota, mas tem uma marcação diferente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Driving Directions example.</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function () {
MySite.MapAdmin.init();
});
var MySite = {};
MySite.MapAdmin = {
mapOptions: {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(46.51257, -84.336609)
},
mapRendererOptions: {
draggable: true,
panel: document.getElementById('map-directions'),
hideRouteList: false
},
directionDisplay: null,
directionsService: null,
map: null,
init: function () {
this.map = new google.maps.Map(document.getElementById("map"), this.mapOptions);
this.directionsService = new google.maps.DirectionsService();
this.directionsDisplay = new google.maps.DirectionsRenderer(this.mapRendererOptions);
this.directionsDisplay.setMap(this.map);
this.plotRoute();
},
plotRoute: function () {
var selectedMode = "DRIVING"; // DRIVING, WALKING, BICYCLING
var request = {
origin: new google.maps.LatLng(46.51257, -84.336609),
destination: new google.maps.LatLng(46.61257, -84.336609),
travelMode: google.maps.DirectionsTravelMode[selectedMode],
provideRouteAlternatives: true
};
MySite.MapAdmin.directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
MySite.MapAdmin.directionsDisplay.setPanel(document.getElementById('map-directions'));
MySite.MapAdmin.directionsDisplay.setDirections(response);
}
});
}
};
</script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<div id="map-directions"></div>
</body>
</html>