0

Criei um sistema de rotas entre dois pontos no Google Maps (um passado pelo usuário e o outro já definido por mim). Meu problema está no processo de mostrar uma nova rota, ou seja, como posso remover uma rota traçada anteriormente pelo usuário, para fornecer uma nova rota caso ele faça a busca novamente?

Já utilizei o "directionsDisplay.setMap(null);" mas não obtive resultados....

 /// INITIALIZATE MAP
    // Iniciando variaveis
    var geocoder;
    var map;
    var marker = '../../imagens/assets/marker-blue.png';
    var directionsService = new google.maps.DirectionsService();

    // Iniciando o map
    function initialize() {
        var latlng = new google.maps.LatLng(-18.898123, -48.265920);
        var options = {
            zoom: 18,
            center: latlng,
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        };
        map = new google.maps.Map(document.getElementById("mapa"), options);
        geocoder = new google.maps.Geocoder();

        // Marcador Personalizado
        marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            icon: marker
        });
        marker.setPosition(latlng);

        // Parâmetros do texto que será exibido no clique;
        var contentString =
            '<h2 class="tip-title">Sertões PetShop</h2>' +
            '<p class="tip-text">Av. Brasil, 2909 - B. Brasil</p>' +
            '<p class="tip-text">Uberlândia-MG</p>' +
            '<a class="tip-site"href="http://www.marcozeropetshop.com.br" target="_blank">www.sertoespetshop.com.br</a>';
        var infowindow = new google.maps.InfoWindow({
            content: '<div id="scrollFix">' + contentString + '</div>',
            maxWidth: 700
        });

        // Exibir texto ao clicar no ícone;
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });

        // Infowindow delay
        setTimeout(function() {
            infowindow.open(map, marker);
        }, 1700);

    }

    initialize();

    // CARREGANDO O MAPA
    function carregarNoMapa(endereco) {
        geocoder.geocode({
                'address': endereco,
                'region': 'BR',
                'componentRestrictions': {
                    'country': 'BR',
                    'administrativeArea': 'Uberlândia'
                }
            },

            function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        var latitude = results[0].geometry.location.lat();
                        var longitude = results[0].geometry.location.lng();

                        $('#txtEndereco').val(results[0].formatted_address);
                        $('#txtLatitude').val(latitude);
                        $('#txtLongitude').val(longitude);

                        var location = new google.maps.LatLng(latitude, longitude);
                        marker.setPosition(location);
                        map.setCenter(location);
                        map.setZoom(16);
                    }
                }
            });
    }

    // CAPTURANDO AS POSIÇÕES E RESULTANDO
    google.maps.event.addListener(marker, 'drag', function() {
        geocoder.geocode({
            'latLng': marker.getPosition()
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    $('#txtEndereco').val(results[0].formatted_address);
                    $('#txtLatitude').val(marker.getPosition().lat());
                    $('#txtLongitude').val(marker.getPosition().lng());
                }
            }
        });
    });

    // Autocomplete dinâmico
    $("#txtEndereco").autocomplete({
        source: function(request, response) {

            geocoder.geocode({
                    'address': request.term + ', Brasil',
                    'region': 'BR',
                    'componentRestrictions': {
                        'country': 'BR',
                        'administrativeArea': 'Uberlândia'
                    }
                },

                function(results, status) {
                    response($.map(results, function(item) {
                        return {
                            label: item.formatted_address,
                            value: item.formatted_address,
                            latitude: item.geometry.location.lat(),
                            longitude: item.geometry.location.lng()
                        };
                    }));
                });
        },
    });

    // Obtendo a latitude e longitude
    $("#btnEndereco").click(function() {

        var directionsDisplay = new google.maps.DirectionsRenderer();
        var request = {
            origin: $("#txtEndereco").val(),
            destination: new google.maps.LatLng(-18.898123, -48.265920),
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

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

                var leg = response.routes[0].legs[0];

                var mStart = new google.maps.Marker({
                    icon: '../../imagens/assets/marker-green.png',
                    position: leg.start_location,
                    map: map,
                });

                var mEnd = new google.maps.Marker({
                    icon: '../../imagens/assets/marker-blue.png',
                    position: leg.end_location,
                    map: map
                });

                // MARCADOR RETURN SHOW
                var contentString = '<h2 class="tip-title">Sertões PetShop</h2>' +
                    '<p class="tip-text">Av. Brasil, 2909 - B. Brasil</p>' +
                    '<p class="tip-text">Uberlândia-MG</p>' +
                    '<a class="tip-site"href="http://www.marcozeropetshop.com.br" target="_blank">www.sertoespetshop.com.br</a>';
                var infowindow = new google.maps.InfoWindow({
                    content: '<div id="scrollFix">' + contentString + '</div>',
                    maxWidth: 700
                });

                // Exibir texto ao clicar no ícone;
                google.maps.event.addListener(mEnd, 'click', function() {
                    infowindow.open(map, mEnd);
                });

                // Infowindow delay
                setTimeout(function() {
                    infowindow.open(map, mEnd);
                }, 1700);

                marker.setMap(null);

                directionsDisplay.setDirections(response);
                directionsDisplay.setOptions({
                    suppressMarkers: true,
                    polylineOptions: {
                        strokeWeight: 6,
                        strokeOpacity: 0.7,
                        strokeColor: '#0C47A0'
                    }
                });
                directionsDisplay.setMap(map);
            }
        });

    });

    // Realizando a busca depois do clique
    $("#form-location").submit(function(event) {
        event.preventDefault();
        var endereco = $("#txtEndereco").val();
        var latitude = $("#txtLatitude").val();
        var longitude = $("#txtLongitude").val();
    });
2
  • O que tira a rota é mesmo o "directionsDisplay.setMap(null);", tenho funcionando em um projeto. Em qual parte do código vc tentou colocar? Commented 6/07/2016 às 13:58
  • Depois da ação de clique, antes de iniciar o objeto que pega as rotas. Commented 6/07/2016 às 16:15

1 Resposta 1

0

Você deve guardar o objeto directionsDisplay em uma variável, se ela estiver setada da o setMap(null).

//variavel para guardar o directionsDisplay
var displayObject = false;

// Obtendo a latitude e longitude
$("#btnEndereco").click(function() {

    //se a variavel estiver setada
    if(displayObject){
        displayObject.setMap(null);
    }

    var directionsDisplay = new google.maps.DirectionsRenderer();
    var request = {
        origin: $("#txtEndereco").val(),
        destination: new google.maps.LatLng(-18.898123, -48.265920),
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

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

            var leg = response.routes[0].legs[0];

            var mStart = new google.maps.Marker({
                icon: '../../imagens/assets/marker-green.png',
                position: leg.start_location,
                map: map,
            });

            var mEnd = new google.maps.Marker({
                icon: '../../imagens/assets/marker-blue.png',
                position: leg.end_location,
                map: map
            });

            // MARCADOR RETURN SHOW
            var contentString = '<h2 class="tip-title">Sertões PetShop</h2>' +
                '<p class="tip-text">Av. Brasil, 2909 - B. Brasil</p>' +
                '<p class="tip-text">Uberlândia-MG</p>' +
                '<a class="tip-site"href="http://www.marcozeropetshop.com.br" target="_blank">www.sertoespetshop.com.br</a>';
            var infowindow = new google.maps.InfoWindow({
                content: '<div id="scrollFix">' + contentString + '</div>',
                maxWidth: 700
            });

            // Exibir texto ao clicar no ícone;
            google.maps.event.addListener(mEnd, 'click', function() {
                infowindow.open(map, mEnd);
            });

            // Infowindow delay
            setTimeout(function() {
                infowindow.open(map, mEnd);
            }, 1700);

            marker.setMap(null);

            directionsDisplay.setDirections(response);
            directionsDisplay.setOptions({
                suppressMarkers: true,
                polylineOptions: {
                    strokeWeight: 6,
                    strokeOpacity: 0.7,
                    strokeColor: '#0C47A0'
                }
            });
            directionsDisplay.setMap(map);

            //depois de setar o directionsDisplay guardar na variavel
            displayObject = directionsDisplay;
        }
    });

});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .