0

Прошу помочь с такой проблемой: При построении маршрута между двумя точками все работает корректно(маркеры удаляем по нажатию на них, драг&дроп работает и маршрут перестраивается) Если добавлять новые маркера, при этом не удалять предыдущие и не двигать их, то код тоже работает. Но если ставить на карте 3 и более маркеров, после чего если начать перемещать их, или же удалять, всплывают баги.

Думаю что в коде где-то допущена логическая ошибка. Вот мой код:

var map;
    var markerArr = [];

    var directionsDisplay;
    var directionsService;

    function initMap() {
        
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 50.45466, lng: 30.5238},
            zoom: 8
        });

        google.maps.event.addListener(map, 'click', function(e) {
            placeMarker(e.latLng, map);  
        });

    }


    function routing() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsService = new google.maps.DirectionsService();
        directionsDisplay.setMap(map);
        directionsDisplay.setOptions( { suppressMarkers: true, suppressInfoWindows: true } );

        for (let index = 0; index < markerArr.length; index++) {
            if (index>=1) {
                var request = {
                    origin: new google.maps.LatLng(markerArr[index-1].position.lat(), markerArr[index-1].position.lng()), //точка старта
                    destination: new google.maps.LatLng(markerArr[index].position.lat(), markerArr[index].position.lng()), //точка финиша
                    travelMode: google.maps.DirectionsTravelMode.DRIVING //режим прокладки маршрута
                };

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

    function placeMarker(position, map) {
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            draggable: true
        });  

        var r1 = google.maps.event.addListener(marker,"click", removeMarkers.bind(null,position.lat()), false);

        google.maps.event.addListener(marker, 'dragend', function(marker) {
            google.maps.event.removeListener(r1);
            directionsDisplay.setMap(null);
            remMarker(marker.latLng.lat());
            routing();
        });

        function remMarker(params) {
            google.maps.event.addListener(marker,"click", removeMarkers.bind(null,params), false);
        }

        markerArr.push(marker);
        //console.log(markerArr[0].position.lat());
        map.panTo(position);
        console.log(markerArr);
        routing();

    }

    function removeMarkers(pos){
        for(let i=0; i<markerArr.length; i++){
            if (markerArr[i].position.lat() == pos) {
                markerArr[i].setMap(null);
                markerArr = markerArr.filter(elem => elem.map != null);
            }
            
        }

        console.log(markerArr);
        directionsDisplay.setMap(null);
        routing();
    }

1 ответ 1

0

Не знаю актуально еще или нет

    var map;
    var directionsService;

    var markerArr = [];
    var directions = [];

    function initMap() {
        directionsService = new google.maps.DirectionsService();
        map = new google.maps.Map(document.getElementById("map"), {
            center: {
                lat: 50.45466,
                lng: 30.5238
            },
            zoom: 9,
        });
        google.maps.event.addListener(map, 'click', function(e) {
            placeMarker(e.latLng);
        });
    }

    function placeMarker(position) {
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            draggable: true
        });
        google.maps.event.addListener(marker, 'dragend', function(marker) {
            calculateAndDisplayRoute();
        });
        marker.addListener("click", () => {
            for (let i = 0; i < markerArr.length; i++) {
                if (markerArr[i] == marker) {
                    markerArr[i].setMap(null);
                    markerArr = markerArr.filter(elem => elem.map != null);
                }
            }
            calculateAndDisplayRoute();
        });
        markerArr.push(marker);
        calculateAndDisplayRoute();
    }

    function calculateAndDisplayRoute() {
        for (var i = 0; i < directions.length; i++) {
            directions[i].setMap(null);
        }
        directions = [];
        for (let i = 0; i < markerArr.length - 1; i++) {
            directionsService.route({
                    origin: new google.maps.LatLng(markerArr[i].position.lat(), markerArr[i].position.lng()),
                    destination: new google.maps.LatLng(markerArr[i + 1].position.lat(), markerArr[i + 1].position.lng()),
                    travelMode: google.maps.TravelMode.DRIVING
                },
                (response, status) => {
                    if (status === "OK") {
                        var dirRenderer = new google.maps.DirectionsRenderer({
                            map: map,
                            suppressMarkers: true,
                            suppressInfoWindows: true
                        });
                        dirRenderer.setDirections(response);
                        directions.push(dirRenderer);
                    }
                }
            );
        }
    }
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.