Добавить существующие маркеры в новый оверлей Polyline

Question

Учитывая набор существующих местоположений маркеров в представлении Google Maps, как я могу добавить точки к наложению PolyLine?

Я создаю веб-приложение, в котором пользователь может выбирать места остановки на основе набора координат GPS, полученных с помощью вызова AJAX. Эта часть отлично работает, так как все точки отображаются на карте.

Моя проблема в том, что я хочу добавить ТОЛЬКО местоположения маркеров на полилинию. В настоящее время выбранные точки добавляются в массив tourList, который преобразуется в массив JSON и публикуется с помощью пост-вызова jjery ajax. Так что я знаю, что обработчики событий click работают для одной части.

Этот вопрос почти соответствует моим потребностям, за исключением того, что он предназначен для Maps API v2, и я использую V3.

Что я получил до сих пор:

//page-specific global variables
var visitPoints = new google.maps.MVCArray();
var polyLine;
var map;

window.onload= function(){
  //set initial map location
  map = new google.maps.Map(
    document.getElementById("map"), mapOptions);    

  //set up polyline capability
  var polyOptions = new google.maps.Polyline({
    path: visitPoints,
    map: map
  });

  polyLine = new google.maps.Polyline(polyOptions);
  polyLine.setMap(map); 

  //get all the GPS locations in the database  This function and makeMarkers works 
  //as designed
  var request = $.ajax({
    type:"GET",
    url: "includes/phpscripts.php?action=cords",
    dataType:"json",
    success: makeMarkers
  });

  //Populate the map view with the locations and save tour stops in array
  function makeMarkers(response){
    console.log("Response Length: "+response.length)
    for (var i=0; i< response.length; i++){
      var marker= new google.maps.Marker({
        position: new google.maps.LatLng(response[i].lat, response[i].lon),
        map: map,
        title: response[i].fileName
      });

      //anonymous function wrapper to create distinct markers
      (function(marker){
        google.maps.event.addListener(marker, 'click', function(){

          tourList.push(marker); //add marker to tour list
          visitPoints.push(marker.latlng); //add location to polyline array
          console.log("Tour List length- # stops: "+tourList.length);

        });
      })(marker);    
    }
  }

  //listener for poline click
  google.maps.event.addListener(map, 'click', updatePolyline)

} //end onload function

//updates the polyline user selections
function updatePolyline(event){
  var path = polyLine.getPath();
  path.push(event.latlng);
} //end updatePolyline

В настоящее время я не получаю никаких предупреждений сценариев в Firebug, но функция updatePolyline никогда не вызывается.

Нужно ли добавлять слушателя внутри слушателя маркера, чтобы обновить полилинию?

Answer 1

Вы написали "Я хочу добавить ТОЛЬКО местоположения маркеров в ломаную линию", хотя при настройке кода полилиния получает новую вершину, добавляемую при каждом щелчке маркера или щелчке пустой части карты. Чтобы полилиния обновлялась сама собой, она должна быть вне слушателя.

Было два места, которые нужно было поменять,

 visitPoints.push(marker.latlng);

в marker.getPosition()

А также event.latlng ближе к концу event.latLng (заглавная L для Lng).

Я столкнулся с некоторыми трудностями во время тестирования. Документы описывают автоматическое обновление, когда MVCArray назначается пути Polyline; однако, похоже, что полилинии не нравится неинициализированный MVCArray (пустые точки посещения). Автообновление не происходило, когда я нажимал на маркеры.

Только когда я установил его с начальным LatLng, он работал как ожидалось, но я закончил тем, что бросил посещение, потому что неизвестно, где будет первая точка. Я полагаю, что лучший подход - инициализировать полилинию с помощью MVCArray visitPoints, когда Ajax вернется. Демо ниже использует getPath, push вместо посещения точек.

DEMO http://jsfiddle.net/yV6xv/8/ (нажмите на маркеры или карту для обновления строки)

Грязный хак, чтобы получить visitPoints инициализирован таким образом, что остальная часть кода функционирует как ожидалось, плюс некоторые незначительные изменения в marker.latlng и event.latlng. Первый щелчок определит первую точку линии, а последующие щелчки расширят линию.

^{должен быть лучший способ}

ДЕМО http://jsfiddle.net/yV6xv/9/

//page-specific global variables
var visitPoints = new google.maps.MVCArray();
var polyLine;
var map;

// REDEFINING mapOptions and tourList
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP};
var tourList = [];

window.onload= function(){
  //set initial map location
  map = new google.maps.Map(
    document.getElementById("map"), mapOptions);    

  //initialization hack
  visitPoints.push(new google.maps.LatLng(0,0));

  //set up polyline capability
  var polyOptions = new google.maps.Polyline({
    path: visitPoints,
    map: map
  });

  //complete initialization hack
  visitPoints.pop();

  polyLine = new google.maps.Polyline(polyOptions);
  polyLine.setMap(map); 

  //get all the GPS locations in the database  This function and makeMarkers works 

/* TEMPORARY COMMENTING OUT
  //as designed
  var request = $.ajax({
    type:"GET",
    url: "includes/phpscripts.php?action=cords",
    dataType:"json",
    success: makeMarkers
  });
*/

makeMarkers([{lat:0, lon:0},{lat:10, lon:10},{lat:15, lon:20},{lat:20, lon:30}]);


  //Populate the map view with the locations and save tour stops in array
  function makeMarkers(response){
    console.log("Response Length: "+response.length)
    for (var i=0; i< response.length; i++){
      var marker= new google.maps.Marker({
        position: new google.maps.LatLng(response[i].lat, response[i].lon),
        map: map,
        title: response[i].fileName
      });

      //anonymous function wrapper to create distinct markers
      (function(marker){
        google.maps.event.addListener(marker, 'click', function(){

          tourList.push(marker); //add marker to tour list
          visitPoints.push(marker.getPosition()); //add location to polyline array
          console.log("Tour List length- # stops: "+tourList.length);

        });
      })(marker);    
    }
  }

  //listener for poline click
  google.maps.event.addListener(map, 'click', updatePolyline)

} //end onload function

//updates the polyline user selections
function updatePolyline(event){
  var path = polyLine.getPath();
  path.push(event.latLng);
} //end updatePolyline