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
}
}
setTimeout()
e passa o ajax como parâmetro de um novosetTimeout()
, entendeu?