Рендеринг Карт Google из ответа API Карт Google

Question

Я пытаюсь нарисовать маршрут между точкой A и точкой B. Я перешел по ссылке ниже:

https://developers.google.com/maps/documentation/directions/intro

Следующая ссылка - пример того, как получитьмаршрут между Монреалем и Торонто.https://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&key=API_KEY

Когда я запускаю этот URL, я получаю ответ JSON.Я проверил много, но не смог понять, как отобразить детали из этого ответа в карту.Может кто-нибудь помочь, указав мне правильное направление?

Я уже проверил эту ссылку: https://developers.google.com/maps/documentation/javascript/examples/directions-simple

Я использую пакет alexpechkarev / google-maps и Laravel для создания этого решения.,Я запустил сервис маршрутов из пакета, который возвращает объект JSON, аналогичный тому, который указан по ссылке в руководстве по API карт Google.

Любая помощь приветствуется.

Спасибо.

Answer 1

Вот общий рецепт:

Вам нужно извлечь координаты маршрута из ответа JSON.Они находятся в ответе на 2 уровнях детализации.

1. Явные координаты основных перекрестков вдоль маршрута.Вы можете читать их на простом английском языке и извлекать их как члены ассоциативного массива.

2. В дополнение к вышесказанному, есть закодированная строка, содержащая намного больше (lat, lon) пар точек междупересечения.Вы должны декодировать их, и есть алгоритм, доступный.(Я сделал версию PHP несколько недель назад и ссылка ниже).Кстати, причина этого второго массива заключается в следующем: представьте себе длинную извилистую проселочную дорогу без пересечений ... этот массив будет следовать изгибам дороги, давая (lat,lon) пар, не найденных в 1.

3).Создайте массив координат (от 1 до 2, если вам нужны более мелкие детали).

4) Затем используйте код, подобный приведенному ниже (украден из-под ссылки ниже и немного откорректирован: https://developers.google.com/maps/documentation/javascript/examples/polyline-simple:), который показывает вамкак рисовать линии на карте.

<script>

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 0, lng: -180},
          mapTypeId: 'terrain'
        });

        var routeCoordinates = [    // put your array here
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var routePath = new google.maps.Polyline({
          path: routesCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',    // adjust line colour
          strokeOpacity: 1.0,        // adjust line opacity  
          strokeWeight: 2            // adjust line thickness
        });

        routePath.setMap(map);
      }
    </script>

Пример по ссылке на Google показывает вам, как сделать крошечный HTML-код и т. д.

Теперь самое подходящее для декодированияточки ломаной линии:

Получение широты и долготы маршрута из карт Google с PHP

Вверху над функцией decodePolylinePoints($pointsString) возвращается массив (lat,lons), который вы можете использоватьдля рисования маршрута.

Вам нужно изучить JSON, чтобы понять код, и хотя он выглядит запутанным, его вполне логично. Поместите JSON в редактор, такой как VSCode, и он будет отображаться в правильном формате.