google maps направления маршрута, не показывающая маршрут

-1

Я использовал простой пример сервиса api-образца, предоставляемый google maps api, в то время как карта, похоже, настраивается, чтобы показать две разные точки, нет маршрута или маркеров.google maps направления маршрута, не показывающая маршрут

directions-simple

Вот что у меня есть:

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

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

     } 

     function calcRoute() { 
      var start = "chicago, il"; 
      var end = "st louis, mo"; 
      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); 
      } 
      }); 
     } 


<div style="height: 25rem; width: 40rem;" id="map-canvas"></div>

Что мне не хватает в моем коде, чтобы отобразить маркеры по умолчанию и маршрут линии?

Большое спасибо

источник

2015-06-19 appthat

Вы как-то вызываете функцию calcRoute? [когда я называю это внутри функции 'initialize', он работает] (http://jsfiddle.net/w4tzk13c/) – geocodezip

@geocodezip У меня есть кнопка html, которая вызывает calcRoute(), это вызывает реакцию на карту, но отсутствуют маркеры и полилиния. – appthat

Я не вижу этого в вашем вопросе. Скрипт в моем комментарии работает (он содержит код, но вызывает 'calcRoute()' в 'initialize'). У вас есть проблема, которая отсутствует в предоставленной вами информации. Просьба представить [Минимальный, полный, проверенный и читаемый пример] (http://stackoverflow.com/help/mcve), который демонстрирует проблему, о которой вы просите. – geocodezip

-1

вы должны вызвать calcRoute() где-то после инициализации .. Вы можете сделать это в конце инициализации(); пример:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Directions service</title> 
    <style> 
     html, body, #map-canvas { 
      height: 100%; 
      margin: 0px; 
      padding: 0px 
     } 

     #panel { 
      position: absolute; 
      top: 5px; 
      left: 50%; 
      margin-left: -180px; 
      z-index: 5; 
      background-color: #fff; 
      padding: 5px; 
      border: 1px solid #999; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
    <script> 
     var directionsDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 

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

     function calcRoute() { 
      var start = "chicago, il"; 
      var end = "st louis, mo"; 
      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); 

    </script> 
</head> 
<body> 
<div id="map-canvas"></div> 
</body> 
</html>

источник

2015-06-19 17:32:11

Очевидно, что html, который вы указали, строго зависит от изменения начального и конечного значений. Css ничего не делает для маршрута, либо просто устанавливает границы карт и как выглядит окно выбора вниз. – appthat

Я изменил свой ответ, вы можете увидеть его выше –

google maps направления маршрута, не показывающая маршрут

ответ

Смежные вопросы