Teste

teste

terça-feira, 21 de fevereiro de 2017

Autocomplete typeahead nominatim openstreetmap

Bom dia a todos.

Fui surpreendido com um telefonema da Google, informando que minha aplicação esta violando clausulas contratuais na utilização da API do Google Maps. Minhas alternativas seriam:

1- Pagar cerca de R$ 46.000,00 por ano por uma licença Premium.
2- Migrar para uma solução OPEN. Foi o que fiz.

Abaixo segue as funções:

 1- Criar as opções do auto complete.

var enderecos = [];var q;var geo_autocomplete_opcoes = {
    ajax: {
        url: 'https://nominatim.openstreetmap.org/search/?format=json&addressdetails=1countrycodes="BR"',        timeout: 500,        displayField: "display",        valueField: "id",        triggerLength: 1,        items: 100,        method: "GET",        dataType: "JSON",        loadingClass: "wait",        preDispatch: function (query) {
            q = query;            return {
                q: q
            }
        },        preProcess: function (data) {
            enderecos = [];            $.each(data, function (index, value) {
                var latitude = value.lat;                var longitude = value.lon;                var propriedades = value.address;                var bairro = '';                if (propriedades.suburb) {
                    bairro = propriedades.suburb;                } else if (propriedades.town) {
                    bairro = propriedades.town;                }
                var localidade = '';                if (propriedades.neighbourhood) {
                    localidade = propriedades.neighbourhood;                }
                if (propriedades.road) {
                    var rua = propriedades.road;                }
                if (propriedades.city) {
                    var cidade = propriedades.city;                }
                if (bairro && rua && cidade) {
                    propriedades.display = cidade + ' - ' + bairro + ' - ' + rua + ' - ' + q;                    if (localidade) {
                        propriedades.display += ' - ' + localidade;                    }
                    propriedades.latitude = latitude;                    propriedades.longitude = longitude;                    propriedades.id = value.place_id;                    enderecos.push(propriedades);                }
            });            if (data.success === false) {
                return false;            } else {
                return enderecos;            }
        }
    }
};
2- Criar a função que retorna os campos do nominatim.opentreetmap.

function preenche_endereco_open(elemento) {
    var deferred = $.Deferred();    try {
        var logradouro = elemento.road.toUpperCase();        var numero = elemento.housenumber;        var cidade = elemento.city.toUpperCase();        var estado = converte_estado(cidade);        var cep = elemento.postcode;        var bairro = '';        if (elemento.suburb) {
            bairro = elemento.suburb.toUpperCase();        } else if (elemento.town) {
            bairro = elemento.town.toUpperCase();        }
        var localidade = '';        if (elemento.neighbourhood) {
            localidade = elemento.neighbourhood.toUpperCase();        } else {
            localidade = cidade;        }
        if (!bairro) {
            bairro = 'GPS'        }
        deferred.resolve({
            "logradouro": logradouro,            "numero": numero,            "bairro": bairro,            "localidade": localidade,            "cidade": cidade,            "estado": estado,            "cep": cep,            "latitude": elemento.latitude,            "longitude": elemento.longitude        });        return deferred;    } catch (_erro) {
        alert('ERRO INESPERADO - 1025: ' + _erro);        return {};    }
}


2- Acrescentar o "onSelect" nas configurações com a chamada para a função que preenche os campos do formulário.

geo_autocomplete_opcoes["onSelect"] = function (item) {
    $.each(enderecos, function (idx, value) {
        if (item.value == value.id) {
            preenche_inputs(value);        }
    });};


3- Configurar o seu campo Autocomplete.
$("#formulario").find("#campo_auto_complete").typeahead(geo_autocomplete_opcoes);

4- Criar a função que preenche os campos do formulário.
function preenche_inputs(elemento) {
    try {
        $.when(preenche_endereco_open(elemento)).then(function (obj) {
            $('#form').find('#logradouro').val(obj.logradouro);            $('#form').find('#numero').val(obj.numero);            $('#form').find('#bairro').val(obj.bairro);            $('#form').find('#localidade').val(obj.localidade);            $('#form').find('#cidade').val(obj.cidade);            $('#form').find('#estado').val(obj.estado);            $('#form').find('#cep').val(obj.cep);            $('#form').find('#latitude').val(obj.latitude);            $('#form').find('#longitude').val(obj.longitude);            $('#form').find('#complemento').val('');        });        $('#form').find('#numero').focus();    } catch (_erro) {
        alert('ERRO INESPERADO - CLI-END-FORM: ' + _erro);    }
}



Nenhum comentário: