Динамические маркеры и полилинии Google Map

Пользователь вставляет город отправления и назначения в текстовый ввод 2, затем нажимает кнопку, чтобы отобразить на карте Google 2 маркера, соответствующие вставленным городам, и полилинию между этими двумя точками.

Вот мой код:

 //Global array
 var pathArray = [];
 var cities = [ origin, destination ];
 $('#button').on("click", function()  {
   reverseGeocodeCities(cities);
 });

  function reverseGeocodeCities(cities) {
   $.each(cities, function(index, value) {
     geocoder.geocode({'address': value}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        addMarkerCity(results[0].geometry.location);
     }
    });
  });
  //Create the polyline just after the loop.
   addPolyline();
 }

  function addMarkerCity(cityPosition) {
    var currentMarker = map.addMarker({
      position: cityPosition
   });
   //Add the position of the marker into the global pathArray used by addPolylineCity function.
   pathArray.push(currentMarker.getPosition());
 }

  function addPolylineCity() {
    console.log(pathArray); //Display "[]" at the first click.
    var polyline = map.drawPolyline({
    path: pathArray,
  });

У меня есть две проблемы с этим кодом: первая заключается в том, что когда пользователь один раз нажимает кнопку, маркеры хорошо отображаются на карте Google, но не ломаная линия между двумя маркерами. Мне нужно дважды нажать на кнопку, чтобы сделать полилинию видимой. Чтобы создать полилинию, я использую глобальный массив pathArray, содержащий позицию каждого маркера. Он всегда отображает пустой массив при первом нажатии, а затем правильное положение маркеров после второго нажатия на кнопку.

Вторая проблема заключается в том, что я делаю простую анимацию символа на созданной полилинии, но направление потока время от времени меняется, если я хочу сделать из Лондона в Нью-Йорк, символ должен скользить из Лондона в Нью-Йорк, а не наоборот ( Я удалил эту часть для простоты кода). Обратите внимание, что я использую оболочку Gmaps для использования функций Google Map.

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


person Nizar B.    schedule 23.05.2015    source источник
comment
Предоставьте минимальный, полный, проверенный и удобочитаемый пример, демонстрирующий проблему.   -  person geocodezip    schedule 24.05.2015
comment
В Javascript API Карт Google нет метода map.addMarker.   -  person geocodezip    schedule 24.05.2015
comment
Почему минус? Код завершен, больше нечего показать! addmarker - моя функция, если вы не получите код, просто не участвуйте в этой теме.   -  person Nizar B.    schedule 24.05.2015
comment
Как ваш код может быть полным, если addMarker — это ваша функция, а ее там нет? Пожалуйста, создайте рабочий пример, используя опубликованный код, демонстрирующий вашу проблему.   -  person geocodezip    schedule 24.05.2015
comment
addMarker — это функция, вызываемая внутри addMarkerCity(cityPosition), видимая в моем коде. addMarker — это функция из библиотеки Gmaps JS.   -  person Nizar B.    schedule 24.05.2015
comment
Нигде в своем вопросе (до сих пор) вы не упомянули библиотеку Gmaps JS.   -  person geocodezip    schedule 24.05.2015
comment
Я собираюсь отредактировать сейчас, но это так очевидно, что я использую оболочку Google Maps.   -  person Nizar B.    schedule 24.05.2015


Ответы (1)


Сначала вы создаете полилинию, а затем маркеры, поэтому полилиния не отображается.

               if (pathArray.length == 2) {
                addPolylineCity();
           }; //hardcode 

Пример JSFiddle

person Alimentador    schedule 23.05.2015
comment
Ничего не меняется, и анимация символов на полилинии по-прежнему ведет себя странно. - person Nizar B.; 24.05.2015