0

Olá! Estou desenvolvendo um mapa aqui e tenho um campo de busca e um mapa com as layers. Estou usando leaflet e a busca estou fazendo personalizada, pois o plugin não atende minhas necessidades. Estou com dificuldade em dar um zoom após encontrar o que procuro. Exemplo: Busquei por um bairro e ao encontrar dar um zoom em sua localização. Diante das explicações, segue o que já tenho feito:

 stComerciaisLayer = L.geoJSON(setoresComerciais, {
    style: function (feature) {
            return feature.properties && feature.properties.style;
 },

Aqui a variável stComerciaisLayer guarda o json que contém todos os dados

$("#txtSearch").autocomplete({
                source: setoresComerciais.features.map(function(d){
                    return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc
    }),
    select: function(event, ui){
        map.fitBounds(stComerciaisLayer.getBounds(ui.item.value));
    } 
});

A busca está funcionando 100%, está buscando, autocompletando e está encontrando o valor, o problema está na hora de dá um zoom no valor buscado. Quando faço um console.log(ui.item.value) o resultado é o valor buscado que corresponde ao return d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc

O que estou fazendo errado e como posso fazer funcionar esse zoom? E se possível que possam me explicar, pois eu não consigo entender o erro. Meu código está no meu repositório:

https://github.com/eltonsantos/leaflet-tests/tree/master/teste2

Obrigado!

1 Resposta 1

0

Opa eu consegui resolver, a quem se interessar e tiver passando pelo mesmo problema, fica aqui a minha solução:

$("#txtSearch").autocomplete({
    source: setoresComerciais.features.map(function(d,i){
        return {
           label: d.properties.sco_num_sc + " - " + d.properties.sco_dsc_loc,
           id: i
        };
    }),
    select: function(event, ui){
        var featureLayer = L.geoJSON(setoresComerciais.features[ui.item.id]);
        map.fitBounds(featureLayer.getBounds());
    } 
});

Eu apenas precisei passar um outro parâmetro "i" que servirá para armazenar o valor do id da área buscada. Então, com o resultado eu a retorno com ui.item.id, lembrando que ui.item label ou value retorna o valor encontrado na busca. E ai fica simples, map.fitBounds pra focar em algum lugar encontrado recebendo o parâmetro featuresLayer.getBounds justamente pra focar onde quero. E pronto! Se ficou alguma dúvida so falar no comentário, se gostaram da resposta, por favor marquem como resposta correta e positive-a!

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 .