Невозможно провести маршруты между маркерами в API карт Google

Я новичок в веб-разработке. В приведенном выше html файле я вызываю api карт Google и размещаю маркеры. Моя цель - проложить кратчайшие маршруты между маркерами. С помощью этого html файла я получаю необходимые точки, четко отмеченные на картах Google, но не пути между ними. Пожалуйста помоги.

 <!DOCTYPE html>
    <html>
      <head>
        <meta name = "viewport" content = "initial-scale=1.0, user-scalable=no">
        <meta charset = "utf-8">
        <title>Reverse Geocoding</title>
        <style>
          /* Always set the map height explicitly to define the size of the div
           * element that contains the map. */
          #map {
            height: 100%;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }
          #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto','sans-serif';
            line-height: 30px;
            padding-left: 10px;
          }
          #floating-panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            width: 350px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
          }
          #latlng {
            width: 225px;
          }
        </style>
      </head>
      <body>

        <div id = "map"></div>

        <script>

           var map;
           var geocoder;



          function initMap() {
            var directionsService = new google.maps.DirectionsService;
            var directionsDisplay = new google.maps.DirectionsRenderer;
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 8,
              center: {lat: -33.931, lng: 151.257},
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });



          var marker, i;




          var locations = [
                ['Manly Beach', -32.80010128657071, 151.28747820854187, 2],
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Maroubra Beach', -33.950198, 151.259302, 1],
                ['Cronulla Beach', -34.028249, 151.157507, 3],
                ['Canly Beach', -33.90010128657071, 151.28747820854187, 6],
                ['Pukuni', -32.90010128657071, 151.28747820854187, 7],
                ['Chulkuni Beach', -31.90010128657071, 151.28747820854187, 8],
                ['Narumi', -30.90010128657071, 151.28747820854187, 9],
            ];

        var request = {
        travelMode: google.maps.TravelMode.DRIVING
        };


        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
        });

        //Shows marker names and related content
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));

        if (i == 0) request.origin = marker.getPosition();
        else if (i == locations.length - 1) request.destination = marker.getPosition();
        else {
          if (!request.waypoints) request.waypoints = [];
          request.waypoints.push({
            location: marker.getPosition(),
            stopover: true,
          });
        }
      }


    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
        }
      });
    }


    google.maps.event.addDomListener(window, "load", initialize);

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

Я специально удалил ключ.

javascript jquery html google-maps google-api

21.06.2018 18:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 316

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы не устанавливаете свойство map для DirectionsRenderer.

Добавлять:

directionsDisplay.setMap(map);

после создания map.

доказательство концепции скрипки

screenshot of resulting map

фрагмент кода:

var map;
var geocoder;

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  var infowindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: -33.931,
      lng: 151.257
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay.setMap(map);  // <=================== add this line
  var marker, i;
  var locations = [
    ['Manly Beach', -32.80010128657071, 151.28747820854187, 2],
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Maroubra Beach', -33.950198, 151.259302, 1],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Canly Beach', -33.90010128657071, 151.28747820854187, 6],
    ['Pukuni', -32.90010128657071, 151.28747820854187, 7],
    ['Chulkuni Beach', -31.90010128657071, 151.28747820854187, 8],
    ['Narumi', -30.90010128657071, 151.28747820854187, 9],
  ];

  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };


  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map
    });

    //Shows marker names and related content
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));

    if (i == 0) request.origin = marker.getPosition();
    else if (i == locations.length - 1) request.destination = marker.getPosition();
    else {
      if (!request.waypoints) request.waypoints = [];
      request.waypoints.push({
        location: marker.getPosition(),
        stopover: true,
      });
    }
  }

  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#floating-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}

#latlng {
  width: 225px;
}

<script async defer src = "https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id = "map"></div>

21.06.2018 19:23

Другие вопросы по теме

Как получить идентификатор динамически сгенерированной кнопки с помощью jQuery?

Как реализовать while (focus_textarea) с помощью jquery или javascript

Как добавить несколько атрибутов с помощью jQuery?

Как убедиться, что весь код обработчика ответов ajax правильно работает в Firefox

Распределите столбцы таблицы равномерно по странице

Отправить по электронной почте кнопку

SerializeArray () без <form>?

Функциональность Woocommerce запрещена после перехода на страницу AJAX

Инфрагистика - показать / скрыть столбцы в коде (без использования диалогового окна выбора столбца по умолчанию)

Могу ли я массово снимать флажки по определенным критериям? Это отменяет выбор всего "jQuery ('input'). Prop ('checked', false);"

Невозможно провести маршруты между маркерами в API карт Google

Ответы 1

Другие вопросы по теме

Похожие вопросы