Boa tarde!
No formulário que estou desenvolvendo, eu pego a latitude e a longitude do usuário. Mas como devo fazer para mostrar na tela o endereço dele (CEP, País, Cidade, Estado, Bairro, Rua)?
Olá @Alessandra_Raupp!
Segue instruções de como realizar essa consulta usando JavaScript no Form.
Formulário
Variáveis
Adicione as seguintes variáveis:
| Nome | Descrição |
|---|---|
| apiKey | Preencha essa variável com a sua chave de API do Google. |
Campos
Adicione os seguintes campos:
| Nome | Descrição |
|---|---|
| txtResult | Resposta da WebAPI |
| txtRua | Rua |
| txtNumero | Numero do endereço |
| txtBairro | Bairro |
| txtCidade | Cidade |
| txtEstado | Estado |
| txtPais | País |
| txtCEP | CEP |
| btnRequest | Botão para fazer a Consulta |
Arquivos JavaScript
Adicione um arquivo JavaScript no Formulário com o seguinte código:
const myForm = (function () {
// Adiciona Callbacks no Formulário
latromi.formManager.setOnFormCreatedCallback(onFormCreated);
latromi.formManager.setOnEventFiringCallback(onEventFiring);
latromi.formManager.setOnFieldValueChangedCallback(onFieldValueChanged);
// Ocorre logo após o form ser inicializado
function onFormCreated(ev) { }
// Ocorre quando um evento é disparado no Form
function onEventFiring(ev) { }
// Ocorre quando o valor de um campo é alterado no Form
function onFieldValueChanged(ev) { }
function reverseGeocodeRequest() {
// Obtém instância do form
const form = latromi.formManager.getFormInstance();
// Obtém chave da API do google maps das variáveis
const apiKey = form.getVariableValue('apiKey');
// Obtém latitude e longitude dos campos da tela
const lat = form.getFieldValue('txtLat');
const lng = form.getFieldValue('txtLng');
// Monta a URL de requisição
const url = "https://maps.googleapis.com/maps/api/geocode/json?location_type=ROOFTOP"
+ "&latlng=" + lat.toString() + "," + lng.toString()
+ "&key=" + apiKey;
// Faz uma requisição GET para obter o retorno do google maps
const xhttp = new XMLHttpRequest();
// Adiciona um callback para o evento de troca de estado "onreadystatechange"
xhttp.onreadystatechange = function () {
// readyState 4 = Pronto
if (this.readyState == 4) {
// Status 200 = OK
if (this.status == 200) {
// Processa o retorno da Web API
const result = JSON.parse(this.responseText);
if (result.status == "OK") {
form.setFieldValue('txtResult', this.responseText);
form.setFieldValue('txtRua', findAddressComponent(result, "route"));
form.setFieldValue('txtNumero', findAddressComponent(result, "street_number"));
form.setFieldValue('txtBairro', findAddressComponent(result, "sublocality_level_1"));
form.setFieldValue('txtCidade', findAddressComponent(result, "administrative_area_level_2"));
form.setFieldValue('txtEstado', findAddressComponent(result, "administrative_area_level_1", "short"));
form.setFieldValue('txtPais', findAddressComponent(result, "country"));
form.setFieldValue('txtCEP', findAddressComponent(result, "postal_code"));
}
else {
// Exibe erro retornado
ShowMessage(result.error_message, "Error", null, "Atenção");
}
}
else {
// Exibe erro não tratado
ShowMessage(this.responseText || "Ocorreu um erro", "Error", null, "Erro Status " + this.status);
}
}
};
xhttp.open('GET', url, true);
xhttp.send();
}
// Essa função procura um componente de endereço. Exemplo: street_number, country...
// Parâmetros:
// result: Resultado completo da WebAPI
// type: Tipo de componente de endereço retornado
// kind (opcional): "long" (padrão) ou "short"
function findAddressComponent(result, type, kind) {
if (!kind) kind = 'long';
if (result.results) {
for (let n = 0; n < result.results[0].address_components.length; n++) {
const addressComponent = result.results[0].address_components[n];
if (addressComponent.types.indexOf(type) !== -1) {
return addressComponent[kind + '_name'];
}
}
}
return null;
}
// Todas as funções acima são "privadas", e não podem ser chamadas externamente.
// As únicas funções que podem ser chamadas externamente são as que compões o resultado a seguir:
return {
getAddress: function () {
reverseGeocodeRequest();
}
}
})();
Procedimentos
Adicione no evento Click do botão “btnRequest” um Procedimento que chame a ação “Executar código JavaScript”. Informe o código a seguir:
myForm.getAddress();