Как получить местоположение перетаскиваемой путевой точки из результата Google Directions - PullRequest
Новая
       3

Как получить местоположение перетаскиваемой путевой точки из результата Google Directions

0 голосов
/ 18 февраля 2019 

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Lokacija Partnerja</title>

  <!--stili za elemente na mapi-->
  <style type="text/css">
    html {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 15px;
      height: 100%;
    }
    
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    /*	start styles for the ContextMenu	*/
    
    .context_menu {
      background-color: white;
      border: 1px solid gray;
    }
    
    .context_menu_item {
      padding: 3px 6px;
    }
    
    .context_menu_item:hover {
      background-color: #CCCCCC;
    }
    
    .context_menu_separator {
      background-color: gray;
      height: 1px;
      margin: 0;
      padding: 0;
    }
    /*	end styles for the ContextMenu	*/
    
    #map_container {
      height: 100%;
    }
  </style>


  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=quarterly&key=#YOURAPIKEY#&sensor=false"></script>
  
  <script type="text/javascript">
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map_container'), {
        zoom: 4,
        center: {
          lat: -24.345,
          lng: 134.46
        } // Australia.
      });

      var directionsService = new google.maps.DirectionsService;
      var directionsDisplay = new google.maps.DirectionsRenderer({
        draggable: true,
        map: map,
        panel: document.getElementById('right-panel')
      });

      directionsDisplay.addListener('directions_changed', function() {
        computeTotalDistance(directionsDisplay.getDirections());
      });

      displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
        directionsDisplay);
    }

    function displayRoute(origin, destination, service, display) {
      service.route({
        origin: origin,
        destination: destination,
        waypoints: [{
          location: 'Adelaide, SA'
        }, {
          location: 'Broken Hill, NSW'
        }],
        travelMode: 'DRIVING',
        avoidTolls: true
      }, function(response, status) {
        if (status === 'OK') {
          display.setDirections(response);
        } else {
          alert('Could not display directions due to: ' + status);
        }
      });
    }

    function computeTotalDistance(result) {
      var total = 0;
      var route = result.routes[0];
      for (var ij = 0; ij < route.legs[0].via_waypoints.length; ij++) {
        counter = counter + 1;
        //alert(counter + ", " + route.legs[i].via_waypoints[ij].B + ", " + route.legs[i].via_waypoints[ij].k)

        route.legs[0].via_waypoints[ij].k,
          route.legs[0].via_waypoints[ij].D
      }
    }
  </script>

</head>

<body onload="initMap()">
  <div id="map_container"></div>
</body>

</html>

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

Я пытаюсь получить доступ к местоположению путевой точки через result.routes[0].legs[0].via_waypoints[0], что дает мне ничего полезного - lat и lng объект "пуст" вместо того, чтобы содержать геолокацию (то же самое касаетсяresult.routes[0].legs[0].via_waypoint[0].location.

У меня есть замечание в моем коде для доступа к геолокации путевой точки через result.routes[0].legs[0].via_waypoints[0].k и result.routes[0].legs[0].via_waypoints[0].D, которая не работает. Я нашел в stackoverflow аналогичный вопрос из 2011, который предлагает использовать location.wa и location.ya, что также не работает.

Я добавил фрагмент кода, вы должны заменить #YOURAPIKEY# своим ключом API Google, чтобы пример работал.Это слегка измененный пример из документации Google

Может кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 18 февраля 2019

Каждый отрезок вашего маршрута представляет собой набор шагов, и в случае, если вы отправили, каждый отрезок соответствует направлениям между одной из ваших остановок (начало, путевые точки, пункт назначения).

  • leg[0]от Перта до Аделаиды
  • leg[1] от Аделаиды до Брокен-Хилла
  • leg[2] от Брокен-Хилла до Сиднея

Так что у вас ничего не будет вvia_waypoints prop.

Вам нужно установить stopover: false в ваших путевых точках, если вы хотите, чтобы они не рассматривались как реальная остановка.Затем вы получите заполненное свойство via_waypoints для каждого этапа (если их больше одного). 

waypoints: [{
  location: 'Adelaide, SA',
  stopover: false
}, {
  location: 'Broken Hill, NSW',
  stopover: false
}],

Затем вы можете выполнить итерацию по via_waypoints и получить координаты.

lat и lng - это методы, а не свойства, поэтому вам нужно вызвать их, например: 

let firstWaypointLat = result.routes[0].legs[0].via_waypoints[0].lat();

Пример ниже, как получить координаты путевых точек: 

function initMap() {

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {
      lat: -24.345,
      lng: 134.46
    } // Australia.
  });

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
    directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{
      location: 'Adelaide, SA',
      stopover: false
    }, {
      location: 'Broken Hill, NSW',
      stopover: false
    }],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {

  let leg = result.routes[0].legs[0];
  for (let i=0; i<leg.via_waypoints.length; i++) {
  
    console.log('Waypoint ' + i + ' coords: ' + leg.via_waypoints[i].lat() + ', ' + leg.via_waypoints[i].lng());
  }
}

initMap();
#map-canvas {
  height: 180px;
}
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...