Как нарисовать маршрут между двумя маркерами в картах Google

Question

Привет Я пытаюсь нарисовать карту маршрута между двумя маркерами, используя javascript. Я пробовал различные примеры, найденные онлайн, но моя карта не загружается, когда вы пытаетесь использовать разные примеры. Я не могу понять причину ошибки. Моя карта просто не загружается.

Я пытаюсь нарисовать маршрут для следующих двух маркеров.

<script> 

     function mapLocation() { 
      var directionsDisplay; 
      var directionsService = new google.maps.DirectionsService(); 
      var map; 

      function initialize() { 
       directionsDisplay = new google.maps.DirectionsRenderer(); 
       var chicago = new google.maps.LatLng(37.334818, -121.884886); 
       var mapOptions = { 
        zoom: 7, 
        center: chicago 
       }; 
       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
       directionsDisplay.setMap(map); 
      } 

      function calcRoute() { 
       var start = new google.maps.LatLng(37.334818, -121.884886); 
       var end = new google.maps.LatLng(38.334818, -181.884886); 
       var request = { 
        origin: start, 
        destination: end, 
        travelMode: google.maps.TravelMode.DRIVING 
       }; 
       directionsService.route(request, function (response, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         directionsDisplay.setDirections(response); 
        } 
       }); 
      }    

      google.maps.event.addDomListener(window, 'load', initialize); 
     } 
     mapLocation(); 
    </script> 

Может кто-нибудь, пожалуйста, помогите мне нарисовать маршрут между двумя маркерами?

Answer 1

Два комментарий:

1. ваш вопрос спрашивает о направлениях между маркерами, но нет никаких маркеров в коде вы публикуемый. Существуют две позиции, определенные объектами LatLng. Служба маршрутов автоматически добавит маркеры в начале и в конце маршрута. Если вы хотите получить маршруты между двумя маркерами, сначала вам нужно добавить их на свою карту.
2. Нет вызова calcRoute в опубликованном коде (я добавил кнопку «route», которая вызывает ее выполнение).

Вопросы:

1. служба направления возвращается ZERO_RESULTS для исходных точек, так что маршрут не рисуется. Добавьте ошибку в случае else для теста if (status == "OK"), чтобы увидеть это.
2. если я изменяю указывает на место, которое на самом деле может быть перенаправлен (Palo Alto, CA), маршрут обслуживания направления не обрабатывается, потому что вы никогда не установить «карте» свойство сервиса направлений

working fiddle

function mapLocation() { 
    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var chicago = new google.maps.LatLng(37.334818, -121.884886); 
     var mapOptions = { 
      zoom: 7, 
      center: chicago 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     directionsDisplay.setMap(map); 
     google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); 
    } 

    function calcRoute() { 
     var start = new google.maps.LatLng(37.334818, -121.884886); 
     //var end = new google.maps.LatLng(38.334818, -181.884886); 
     var end = new google.maps.LatLng(37.441883, -122.143019); 
     var bounds = new google.maps.LatLngBounds(); 
     bounds.extend(start); 
     bounds.extend(end); 
     map.fitBounds(bounds); 
     var request = { 
      origin: start, 
      destination: end, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 
     directionsService.route(request, function (response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
       directionsDisplay.setMap(map); 
      } else { 
       alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
      } 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
} 
mapLocation(); 

работает фрагмент кода:

function mapLocation() { 
 
    var directionsDisplay; 
 
    var directionsService = new google.maps.DirectionsService(); 
 
    var map; 
 

 
    function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var chicago = new google.maps.LatLng(37.334818, -121.884886); 
 
    var mapOptions = { 
 
     zoom: 7, 
 
     center: chicago 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 
    directionsDisplay.setMap(map); 
 
    google.maps.event.addDomListener(document.getElementById('routebtn'), 'click', calcRoute); 
 
    } 
 

 
    function calcRoute() { 
 
    var start = new google.maps.LatLng(37.334818, -121.884886); 
 
    //var end = new google.maps.LatLng(38.334818, -181.884886); 
 
    var end = new google.maps.LatLng(37.441883, -122.143019); 
 
    var request = { 
 
     origin: start, 
 
     destination: end, 
 
     travelMode: google.maps.TravelMode.DRIVING 
 
    }; 
 
    directionsService.route(request, function(response, status) { 
 
     if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     directionsDisplay.setMap(map); 
 
     } else { 
 
     alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
 
     } 
 
    }); 
 
    } 
 

 
    google.maps.event.addDomListener(window, 'load', initialize); 
 
} 
 
mapLocation();

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" id="routebtn" value="route" /> 
 
<div id="map-canvas"></div>

Answer 2

Довольно много ошибок. Во-первых, это геолокация. Ваше второе место неверно, поскольку долгота может быть только от +180 до -180, поэтому -181 не существует на земле! Во-вторых, как упоминал в комментарии г-н Упсидаун, вы вызываете функцию внутри функции. Сначала исправьте геолокацию, а затем вызовы функций, которые должны исправить проблемы, которые у вас есть.