Блог

Главная - Вопросы по программированию - Get Directions API v3

Get Directions API v3

#javascript #jquery #html #google-maps

#javascript #jquery #HTML #google-карты

Вопрос:

Я реализовал некоторые опции на своей карте Google, но у меня возникли проблемы с частью GET DIRECTIONS. Я прочитал много ответов и реализовал многими способами, но все еще не могу понять, что не так. Надеюсь, вы сможете мне помочь:

Я пытаюсь получить указания от: местоположения пользователя (используя геолокацию), до: места с одним щелчком мыши.

Я правильно реализовал все вышесказанное, но что-то не так с моим кодом Directions:

 var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
//some styles
var mapProp = {
//disableDefaultUI:true,    
zoom:14,
mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
 },
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {/*zoom on the left*/
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
            }
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
 directionsDisplay.setMap(map);
var destinationmarker;

function placeMarker(destination) {
if ( destinationmarker ) {
destinationmarker.setPosition(destination);
} else {
destinationmarker = new google.maps.Marker({
  position: destination,
  map: map
});

}
$("#end").val(destination.lat() "," destination.lng());

}

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);

});
// some markers from db
//below is the location of the user with a marker
var marker=new google.maps.Marker({
position: pos,
animation:google.maps.Animation.BOUNCE,
icon:'ktuugeo.png',
});

marker.setMap(map); 

$("#start").val(pos.lat() "," pos.lng());
google.maps.event.addListener(marker);

//supposedly the route function, set to execute on change
function calcRoute() {
var start = document.getElementById("start").value;
var final = document.getElementById("end").value;
var request = {
  origin: start,
  destination: final,
  travelMode: google.maps.TravelMode.WALKING
 };
 directionsService.route(request, function(response, status) {
 if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
 }
 });
 }
 google.maps.event.addDomListener(window, 'load', initialize);

<body><div id="googleMap"></div>
<div id="dire" >
<textarea cols="20" rows="5" id="start" name="start"></textarea>
<textarea cols="20" rows="3" id="end" name="end" onchange="calcRoute();"></textarea>
</div>
</body>

Я думаю, это все. Я пропустил некоторые части, которые не влияют

Ответ №1:

Что ж, я не могу гарантировать, что это единственная деталь, которую нужно исправить, но, по крайней мере, я могу сказать вам, что calcRoute ожидает объекты в качестве источника и назначения. Вы вводите в него строку.

Если вы уже знаете значения pos и destination (вы использовали их для рисования обоих маркеров), то используйте их снова вместо сохранения позиций в виде строк в элементах DOM.

 function calcRoute(pos,destination) {
    var request = {
        origin: pos,
        destination: destination,
        travelMode: google.maps.TravelMode.WALKING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            directionsDisplay.setMap(map);
        }
    });
}

Редактировать: я пропустил настройку атрибута directionsDisplay map.

Здесь я оставил вам рабочий пример:http://bl.ocks.org/amenadiel/acad781594f9976839c3

Комментарии:

1. проблема в том, что координаты хранятся таким образом (xx.xxxx, гггг.гггг). Включая скобки. Я предполагаю, что это проблема, и именно поэтому мне пришлось сохранить ее в другой переменной и отфильтровать.

2. Если бы это было так, то ни маркер источника, ни маркер назначения не отображались бы. Отображаются ли они?

3. Кстати, должен ли я делать что-либо, связанное с Google Api Console?

4. Нет, вы не делаете ничего, что связано с аутентификацией.

5. Я понимаю. На самом деле это была моя первая попытка, но ничего не произошло, именно так, как вы написали. Я только что попробовал это снова, и пока никакого результата. И да, оба маркера отображаются на карте