Как показать слой трафика поверх полилинии Directions в API Google Maps

Я использую Javascript API для отображения карты google с указаниями (на основе ввода пользователя) вместе с уровнем трафика. он работает хорошо, но я не могу понять способ отображения цветов трафика на соответствующих полилиниях выше моей настраиваемой строки. какой правильный способ сделать это?

Ответ 1

Отображение уровня трафика

Простое отображение уровня трафика можно выполнить с помощью JavaScript API, как показано ниже.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

Это не только даст вам доступ к слою трафика, но также и к каналам транзита и велосипеда.

Вот рабочий пример:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Traffic layer</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: {lat: 34.04924594193164, lng: -118.24104309082031}
        });

        var trafficLayer = new google.maps.TrafficLayer();
        trafficLayer.setMap(map);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

PS: перед использованием убедитесь, что вы используете свой API-ключ в

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>

Для получения дополнительной информации об этом примере вы можете прочитать страницу документации в этом примере или полный документация для отображения данных (которую я рекомендую).

Это не совсем то, что я хочу

Опыт обычно говорит нам, что когда вы предлагаете маршрут пользователю, если у указанного маршрута есть красная линия трафика, пользователь будет автоматически искать что-то еще - заставить его выполнить другой запрос будет громоздким.

Таким образом, уровни трафика являются хорошим решением, чтобы избежать предыдущего поведения.

Это, однако, также означает, что вы не можете просто выбрать часть слоя (например, соответствующую вашей полилинии) и вставить туда - это не цель слоев.

Если это решение не подходит для вас, есть другой способ...

Служба проезда

Directions Service, которая искажает направления между двумя точками.

С помощью этой службы вы можете сделать запрос с параметром provideRouteAlternatives равным true и departureTime для drivingOptions.

Согласно документации,

departureTime (требуется, чтобы литерал объекта motionOptions был valid) указывает желаемое время отправления как объект Date. (...) Для клиентов премиум-плана API Карт Google, если вы включили FROMTime в запросе API возвращает наилучший маршрут с учетом ожидаемые условия трафика в то время и включают время в трафике (duration_in_traffic) в ответе. (...)

Итак, если вы сделаете запрос на альтернативные маршруты и у вас есть время отлета, у вас будет duration_in_traffic в ответе для каждого маршрута, и с ним вы можете нарисовать многоугольник с желаемым цветом в зависимости от того, насколько хорошо или плохо путь.

Подробнее о службе JavaScript Directions вы можете узнать по адресу https://developers.google.com/maps/documentation/javascript/directions

Это все еще не то, что я хочу

Используя только API и службы Google Maps, это насколько возможно. Если эти параметры по-прежнему вам не подходят, вам нужно будет смешать свою карту с данными трафика со сторонних сторон.

Надеюсь, это поможет!

Ответ 2

Попытайтесь использовать Embed API в режиме маршрутов. Подробные сведения об этом вы можете найти здесь (внедрить API в режиме Direction). Вот пример, который выглядит следующим образом.

  <iframe
    width="600"
    height="450"
    frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/directions?key=YOUR_API_KEY&origin=indira+nagar+Bangalore&destination=Whitefield+Bangalore&avoid=tolls|highways" allowfullscreen>
  </iframe>

Что даст вам ниже результата.

Вы можете генерировать URL-адрес src динамически для источника времени выполнения - отображения маршрута целевого трафика.