Изменение положения рендеринга направления при перетаскивании маркера

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

Но если я перемещу маркер в другую точку, он не изменит линию рендеринга в соответствии с положением маркера, я хочу «обновить» этот рендерер, когда я изменю положение маркера.

Это ссылка на мой проект с оригинальной версией Вот мой код: (отредактировано с моя попытка)

var map, ren, ser;
var data = {};
var data2 = {};
var marker;
var infowindow;
var directionsDisplay;

var wayA = [];
var wayB = [];
var directionResult = [];

function goma()
{
    var mapDiv = document.getElementById('mappy');   
    var mapOptions = {
    zoom: 12,       
    center: new google.maps.LatLng(-23.563594, -46.654239),
    mapTypeId : google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map( mapDiv, mapOptions );

    google.maps.event.addListener(map, "click", function(event) {
        if (wayA.length == wayB.length) {
        wayA.push(new google.maps.Marker({
      draggable: true,      
          position: event.latLng,
          map: map        
        }));
        } else {
        wayB.push(new google.maps.Marker({
      draggable: true,  
          position: event.latLng,
          map: map  
        }));  

ren = new google.maps.DirectionsRenderer( {'draggable':true, suppressMarkers : true}  );
    ren.setMap(map);
    ren.setPanel(document.getElementById("directionsPanel"));
    ser = new google.maps.DirectionsService();

    ser.route({ 'origin': wayA[wayA.length-1].getPosition(), 'destination':  wayB[wayB.length-1].getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
        if(sts=='OK') {
                    directionResult.push(res);
                    ren.setDirections(res); 

                } else {
                    directionResult.push(null);
                }
        });     
    }
 });
}

google-maps-api-3 direction
person Fred Vicentin    schedule 08.10.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

У меня есть демонстрация, которая делает то, что вы ищете.

Необходимые вам изменения находятся в

directionsDisplay = new google.maps.DirectionsRenderer( {
'map': map,
'preserveViewport': true,
'draggable':true/*, 
'suppressMarkers' : true */} 
);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
directionsService = new google.maps.DirectionsService();    
    }
});

Уведомление suppressMarkers' : true было закомментировано

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

function clearOverlays() {
 if (wayA) {
   for (i in wayA) {
   wayA[i].setMap(null);
 }
 }
 if (wayB) {
   for (i in wayB) {
     wayB[i].setMap(null);
  }
}
}

Это называется в конце

  function calcRoute() {

directionsService.route({ 'origin': wayA[wayA.length-1].getPosition(), 'destination': 
      wayB[wayB.length-1].getPosition(), 'travelMode': 
 google.maps.DirectionsTravelMode.DRIVING},function(response,status) {
    if(status == google.maps.DirectionsStatus.OK) {
                directionResult.push(response);
                directionsDisplay.setDirections(response);  

            } else {
                directionResult.push(null);
            }

})
clearOverlays();
}
person david strachan    schedule 08.10.2012
comment
Ссылка на демонстрацию больше не работает. Я тоже ищу подобное решение. Более подробная информация о моей проблеме находится по адресу: stackoverflow.com/questions/25441938/ . Любое руководство будет оценено - person Piyush Arora; 22.08.2014

arrow_upward
1
arrow_downward

Эта карта:

http://www.geocodezip.com/v3_directions_custom_icons_draggable.html

Позволяет перетаскивать маркеры и пересчитывает маршрут на основе нового положения. Он был разработан до «перетаскиваемых направлений», поэтому полилинию нельзя перетаскивать.

person geocodezip    schedule 08.10.2012
comment
Я пытался, но я не могу понять код, выглядит похоже, но я не могу найти, что мне нужно изменить. Но спасибо за помощь - person Fred Vicentin; 08.10.2012

arrow_upward
1
arrow_downward

Добавьте функцию прослушивания событий на маркеры для 'dragend', которая пересчитывает направление. Вот краткий пример с идентичными слушателями на каждом, но вы, вероятно, могли бы выделить этот код в отдельную функцию, которая работает с маркерами как wayA, так и wayB.

google.maps.event.addListener(wayA[wayA.length-1], 'dragend', function() {
    ser.route({ 'origin': wayA[wayA.length-1].getPosition(), 'destination':  wayB[wayB.length-1].getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
        if(sts=='OK') {
            rectionResult.push(res);
            ren.setDirections(res); 
        } else  {
            directionResult.push(null);
        }
    })
}

google.maps.event.addListener(wayB[wayB.length-1], 'dragend', function() {
    ser.route({ 'origin': wayA[wayA.length-1].getPosition(), 'destination':  wayB[wayB.length-1].getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
        if(sts=='OK') {
            rectionResult.push(res);
            ren.setDirections(res); 
        } else  {
            directionResult.push(null);
        }
    })
}
person duncan    schedule 08.10.2012