1

Bom, estou desenvolvendo um campo de pesquisa para uma aplicação, onde o usuário digita um endereço ou nome de um estabelecimento e o sistema retorna dinamicamente os resultados, porém nos resultados preciso retornar a distância entre o usuário e o estabelecimento para cada resultado, essa distância é calculada pelo Distance Matrix API, e para inserir essa resposta preciso usar o innerHTML, o problema é que eu preciso capturar o id ou class do elemento que foi criado pela query e chamou a função para dar um "echo", como eu posso pegar o id de um elemento variável, isto é, uma pesquisa pode retornar 3 ou 10 resultados por exemplo, como saber o id de cada um??

Segue o javascript:

function initMap() { const autocomplete = new google.maps.places.Autocomplete(document.getElementById('searchBox')); }//Campo de pesquisa dinâmico do google maps

function givePosition() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getDistance);//Pegando a localização atual do usuário
    }
}

function getDistance(position) {
    var coords = [position.coords.latitude, position.coords.longitude];//Transforma a localização atual do usuário em um array para poder ser usado no distance matrix
    var origin = new google.maps.LatLng(coords[0], coords[1]);
    var destination = new google.maps.LatLng(-25.494926, -49.294445);//Problema 2: Pegar o endereço do estabelecimento

    var service = new google.maps.DistanceMatrixService();//Chama o método para calcular a distância
    service.getDistanceMatrix({
        origins: [origin],
        destinations: [destination],
        travelMode: 'DRIVING'
    }, callback);
}

function callback(response) {
    var distance = response.rows[0].elements[0].distance;//Recebe a distância do usuário
    console.log(distance.text);//Retornar o valor para o html, no caso apenas o log para testar (está funcionando)
}

$("#searchForm").keyup(function () { //requisição ajax para fazer a pesquisa
    var search = $("#searchBox").val();
    $.post('includes/establishmentSearch.inc.php', {searchForm: search}, function(data){
        $('#searchResponse').html(data);
        if (search == '') {
            $("#searchResponse").empty();
            $(".groupSepare").show();
        } else {
            $(".groupSepare").hide();
        }
    });
});

Segue o PHP:

if ($count > 0) {
    while ($show = $result->FETCH(PDO::FETCH_OBJ)) {
        ?>
        <div class="establishmentBlock">
            <img src="images/<?php echo $show->est_photo; ?>">
            <div class="establishmentData">
                <?php echo $show->est_name; ?> ~ <span class="litDistance"><script>givePosition();</script></span><br>
                <?php echo $show->esl_street_number; ?>, <?php echo $show->esl_street_address; ?><br>
                <?php echo $show->esl_city; ?>, <?php echo $show->esl_state; ?>
            </div>
        </div>
        <?php
    }
}
4
  • apenas uma observação, fazer uma requisição assíncrona cada vez que o usuário soltar uma tecla não é a melhor maneira. Seria bom, pelo meno, um delay de 3s entre cada "soltar a tecla" para iniciar uma requisição
    – Costamilam
    Commented 30/04/2018 às 23:35
  • Acabei de conseguir fazer o que eu queria, @GuilhermeCostamilam, como eu faço isso? usando o "timer" do jquery? Commented 1/05/2018 às 0:03
  • Não sei se o JQuery tem alguma função para isso, mas sempre que o usuário der o keyup você limpa o setTimeout() e passa o ajax como parâmetro de um novo setTimeout(), entendeu?
    – Costamilam
    Commented 1/05/2018 às 2:19
  • Sim, fiz isso var timer = null; > evento keyup > clearTimeout(timer); > timer = setTimeout(function () { ~requisição ajax~ }); }, 1000); , agora demora 1 segundo para fazer a requisição depois da última tela pressionada Commented 1/05/2018 às 18:50

1 Resposta 1

1

A solução estava na cara, só não tinha precebido:

    function initMap() { const autocomplete = new google.maps.places.Autocomplete(document.getElementById('searchBox')); }//Campo de pesquisa dinâmico do google maps
    var spanId;
    function givePosition(id) {
        spanId = id;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getDistance);//Pegando a localização atual do usuário
        }
    }

    function getDistance(position) {
        var coords = [position.coords.latitude, position.coords.longitude];//Transforma a localização atual do usuário em um array para poder ser usado no distance matrix
        var origin = new google.maps.LatLng(coords[0], coords[1]);
        var destination = new google.maps.LatLng(-25.494926, -49.294445);//Problema 2: Pegar o endereço do estabelecimento

        var service = new google.maps.DistanceMatrixService();//Chama o método para alcular a distância
        service.getDistanceMatrix({
            origins: [origin],
            destinations: [destination],
            travelMode: 'DRIVING'
        }, callback);
    }

    function callback(response) {
        var distance = response.rows[0].elements[0].distance;//Recebe a distância do usuário através
        if (document.getElementById(spanId)){
            document.getElementById(spanId).innerHTML = distance.text;//Retornar o valor para o html
        }
    }

    $("#searchForm").keyup(function () { //requisição ajax para fazer a pesquisa
        var search = $("#searchBox").val();
        $.post('includes/establishmentSearch.inc.php', {searchForm: search}, function(data){
            $('#searchResponse').html(data);
            if (search == '') {
                $("#searchResponse").empty();
                $(".groupSepare").show();
            } else {
                $(".groupSepare").hide();
            }
        });
    });

A solução foi simples, passei o id da requisição para a função usando php e depois joguei numa variável global:

if ($count > 0) {
    while ($show = $result->FETCH(PDO::FETCH_OBJ)) {
        ?>
        <div class="establishmentBlock">
            <img src="images/<?php echo $show->est_photo; ?>">
            <div class="establishmentData">
                <?php echo $show->est_name; ?> ~ <span id="<?php echo $show->est_id; ?>"><script>givePosition(<?php echo $show->est_id; ?>);</script></span><br>
                <?php echo $show->esl_street_number; ?>, <?php echo $show->esl_street_address; ?><br>
                <?php echo $show->esl_city; ?>, <?php echo $show->esl_state; ?>
            </div>
        </div>
        <?php
    }
}

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 .