Трассировка маршрута в реальном времени Карты api V3

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

Кто-нибудь может мне помочь?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Maps Geolocation</title>

<style>

.success{
        background-color:#6F9!important;
        color:#000!important;
        }

#status{
        padding:5px;
        background-color:#000;
        color:#fff;}       

</style>
</head>

<body>

<section id="wrapper">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <article>
      <p><span id="status">Please wait whilst we try to locate you...</span></p>
    </article>
<script>


function success(position) {
  var s = document.querySelector('#status');
  
  if (s.className == 'success') {
    return;
  }
  
  s.innerHTML = "found you!";
  s.className = 'success';
  
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '800px';
  mapcanvas.style.width = '100%';
    
  document.querySelector('article').appendChild(mapcanvas);
  
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 16,
    center: latlng,
   // styles: styles,
    mapTypeControl: false
  };

  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  
  var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"You are here!"
  });
}

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';
  
  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

</script> 
</section>

</body>
</html>

Я хочу, пока пользователь идет по маршруту, нарисован на карте

javascript,html5,google-maps-api-3,

0

Ответов: 1

0

Вы можете попробовать:

  • Для перехода по конкретным направлениям используйте API Google Maps Directions .

    С помощью этого API, travelModeявляется обязательным полем при отправке запросов на запросы. Однако это не дает ответов в реальном времени (насколько я знаю).

  • Чтобы получить места в реальном времени, используйте API геолокации Google Maps .

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

    Примечание . Приложения, которые хотят выполнять геолокацию, должны поддерживать стандарт W3C Geolocation . Я также предлагаю вам проверить 6 случаев использования и требований .

После получения текущего местоположения или маршрута вы можете построить маршрут с помощью Polylines . Как указано в документации,

PolylineКласс определяет линейное наложение соединенных отрезков линии на карте. PolylineОбъект состоит из массива LatLngмест, и создает серию отрезков, соединяющие эти точки в заданной последовательности.

Вот простой код реализации полилинии:

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

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

  var flightPlanCoordinates = [
    {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 flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

ВАЖНОЕ ПРИМЕЧАНИЕ. Я бы предположил, что вы проверяете ограничения лицензий на Условия использования Google Maps, в частности, те ограничения, которые применяются в отношении API Карт API.

Для лучшего понимания, пожалуйста, попробуйте просмотреть документацию, и вы также можете проверить эти дополнительные ссылки:

  • Информация о покрытии карты, в которой указаны данные о зоне покрытия в каждой стране.
  • Статьи PubNub для примеров кода реализации
    • Отслеживание геолокации Google Maps в режиме реального времени с использованием JavaScript
    • Передача данных геолокации с помощью служб местоположения HTML5

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

JavaScript, html5, Google-карты-апи-3,
Похожие вопросы
Яндекс.Метрика