Jump to content
gfontan1910

Criação de mapa dinâmico com elementos clicáveis

Recommended Posts

Olá boa tarde. Preciso de uma ajuda na criação de um mapa do Brasil de forma dinâmica de modo que seja possível clicar nos estados. Assim que selecionado um estado, preciso exibir algumas informações deste determinado estado. O mapa seria algo parecido com esse da home do Olx (https://olx.com.br).

 

Alguém pode ajudar com algum material voltado para este tipo de desenvolvimento?

 

 

Obs: tem um tópico sobre isso no fórum, porém de 2015 e muitos links que foram recomendados estão off atualmente

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By sergio pereira cardoso
      ola, sou novo no forum, é simples, preciso de uma rotina para mostrar o mapa e minha localizacao, obrigado, vlws ...
    • By GabrielB3r
      Bom dia pessoal, tenho um formulário que contém 5 exames a serem cadastrados em bancos de dados diferentes. Porém na aba "outros" fiz um campo dinâmico caso a pessoa realize outros exames que não são mostrados no formulário. Segue a parte do código:
      exames.php
       A parte à baixo está dentro do formulário <form id="FormExamesAnimal" method="POST"> <div id="form_outros"> <script type="text/javascript"> var qtdeCampos = 0; function addCampos() { var objPai = document.getElementById("campoPai"); //Criando o elemento DIV; var objFilho = document.createElement("div"); //Definindo atributos ao objFilho: objFilho.setAttribute("id","filho"+qtdeCampos); //Inserindo o elemento no pai: objPai.appendChild(objFilho); //Escrevendo algo no filho recém-criado: document.getElementById("filho"+qtdeCampos).innerHTML = "<div id='form_outro'><fieldset class='scheduler-border'><legend class='scheduler-border'>Exame outro:</legend><div class='col-md-6'><label>Data de Envio do Material:</label><input type='text' class='form-control campos' id='data_mat_outro"+qtdeCampos+"' name='data_mat_outro[]'></div><div class='col-md-6'><label>Data do Resultado:</label><input type='text' class='form-control campos' id='data_result_outro"+qtdeCampos+"' name='data_result_outro[]'></div><div class='col-md-6'><label>Resultado:</label><input type='text' class='form-control campos' id='result_outro"+qtdeCampos+"' name='result_outro[]'></div><div class='col-md-6'> <label>Destino Animal:</label><input type='text' class='form-control campos' id='dest_outro"+qtdeCampos+"' name='dest_outro[]'></div><div class='col-md-12'><label>Observação:</label><textarea class='form-control' rows='4' id='obs_outro"+qtdeCampos+"' name='obs_outro[]' placeholder='Insira um Comentário se necessário'></textarea></div></fieldset></div><input type='button' onClick='removerCampo("+qtdeCampos+")' value='Apagar campo'>"; qtdeCampos++; } function removerCampo(id) { var objPai = document.getElementById("campoPai"); var objFilho = document.getElementById("filho"+id); //Removendo o DIV com id específico do nó-pai: var removido = objPai.removeChild(objFilho); } </script> <fieldset class="scheduler-border"> <legend class="scheduler-border">Exame outro:</legend> <div class="col-md-6"> <label>Data de Envio do Material:</label> <input type="text" class="form-control campos" id="data_mat_outro" name="data_mat_outro"> </div> <div class="col-md-6"> <label>Data do Resultado:</label> <input type="text" class="form-control campos" id="data_result_outro" name="data_result_outro"> </div> <div class="col-md-6"> <label>Resultado:</label> <input type="text" class="form-control campos" id="result_outro" name="result_outro"> </div> <div class="col-md-6"> <label>Destino Animal:</label> <input type="text" class="form-control campos" id="dest_outro" name="dest_outro"> </div> <div class="col-md-12"> <label>Observação:</label> <textarea class="form-control" rows="4" id="obs_outro" name="obs_outro" placeholder="Insira um Comentário se necessário"></textarea> </div> </fieldset> <div id="campoPai"></div> <input type="button" value="Adicionar campos" onclick="addCampos()"> </div> <!--FIM OUTROS EXAMES--> </div> <script> /*Filtro com o formato de data*/ $('#data_mat_outro, #data_result_outro').datepicker({ format: "dd/mm/yyyy", language: "pt-BR", autoclose: true }); /*Valida e cadastra os exames*/ $("#FormExamesAnimal").validate({ rules: { data_mat_outro: { required: true }, data_mat_outro: { required: true }, result_outro: { required: true } }, messages: { data_mat_outro: "Informe a data de envio do material", data_result_outro: "Informe a data do resultado", result_outro: "Informe o resultado" }, tooltip_options: { data_mat_outro: { placement:'bottom', trigger:'focus' }, data_result_outro: { placement:'bottom', trigger:'focus' }, result_outro: { placement:'bottom', trigger:'focus' } }, /*Grava os itens no banco*/ submitHandler: function () { $.ajax({ url:"exames/cadastrar_exames.php", type:"POST", data:$("#FormExamesAnimal").serialize(), dataType:'json', beforeSend: function() { $('#gravar').prop("disabled" , true); }, complete: function() { $(':input','#FormExamesAnimal') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); mudar_pagina('animais/relatorio.php','#relatorio_paginacao'); CriarToast('Exames cadastrados com sucesso.'); $('#gravar').prop("disabled" , false); }, success:function(resposta) { } });/*ajax*/ return false; }/*submitHandler*/ }); /*validate*/ });/*document redy function*/ </script> Minha dúvida é como eu faço para inserir essa parte no banco de dados, tentei colocar um "for" mas estava salvando somente a última opção cadastrada e as outras maneiras que encontrei pela internet nem funcionaram :/
      cadastrar_exames.php
      include "../../banco_animais/conecta.php"; /*Outros*/ $data_mat_outro = strip_tags($_POST['data_mat_outro']); $data_result_outro = strip_tags($_POST['data_result_outro']); $result_outro = strip_tags($_POST['result_outro']); $dest_outro = strip_tags($_POST['dest_outro']); $obs_outro = strip_tags($_POST['obs_outro']); //caso não tenha sido inserido nenhum valor, salva como não cadastrado. if($data_mat_outro==null && $data_result_outro==null && $result_outro==null && $dest_outro==null && $obs_outro==null){ $data_mat_outro = 'nao cadastrado'; $data_result_outro = 'nao cadastrado'; $result_outro = 'nao cadastrado'; $dest_outro = 'nao cadastrado'; $obs_outro = 'nao cadastrado'; $realiza_outro = 'nao'; } /*Salva no banco*/ $sql_outros="INSERT INTO exame_outros (realiza_outro, data_mat_outro, data_result_outro, result_outro, dest_outro, obs_outro, outro_cod, data_proc) VALUES ('$realiza_outro', '$data_mat_outro', '$data_result_outro', '$result_outro', '$dest_outro', '$obs_outro', '$outro_cod', CURDATE())"; /*realiza_outro salva se o exame foi realizado ou não e é exibido em uma tabela depois, outro_cod serve para fazer referência ao animal escolhido para realizar os exames e data_proc salva a data atual que foi feito o cadastro do exame*/  
    • By laloproces
      Boa noite. Segue o texto do método main:
       
      /*O sistema basicamente faz é pedir informções para o usuário, pergutando quantas pessoas vai cadastrar, *qual o nome, telefone, se a pessoa trabalha, pede o cargo e a empresa para no final exibir essas informações na tela. */ public static void main(String[] args) { Scanner in = new Scanner(System.in); System.out.println("Quantas pessoas você vai cadastrar? (Somente números)\n"); int pessoas = (int)in.nextInt(); String[] nome = new String[pessoas]; String[] telefone = new String[pessoas]; String[] profissao = new String[pessoas]; String[] empresa = new String[pessoas]; int op = 0; for(int i=0; i<pessoas; i++) { System.out.println("\nDigite o nome do serumaninho:\n"); nome[pessoas] = in.toString(); //Tá dando erro aqui, provavelmente por causa da variável dinâmica pessoas System.out.println("\nDigite o telefone desse serumaninho:\n"); telefone[pessoas] = in.nextLine(); System.out.println("\nEsse vivente trabalha? (0 para não, 1 para sim)\n"); op = in.nextInt(); if(op == 1){ System.out.println("\nDigite a profissão dele:\n"); profissao[pessoas] = in.nextLine(); System.out.println("\nDigite o nome da empresa em que ele trabalha:\n"); empresa[pessoas] = in.nextLine(); } } for(int j=0; j<pessoas; j++){ if(op ==1){ Pessoa[] p = {new Profissional(nome[j], telefone[j], profissao[j], empresa[j])}; } else{ Pessoa[] p2 = {new Pessoa(nome[j], telefone[j])}; } } for(int h=0; h<pessoas; h++){ if(op==1){ Pessoa[] p = {new Profissional(nome[h], telefone[h], profissao[h], empresa[h])}; System.out.println(Arrays.toString(p)); } else{ Pessoa[] p2 = {new Pessoa(nome[h], telefone[h])}; System.out.println(Arrays.toString(p2)); } } } //Abaixo estão as classes, que estão em outros arquivos Java. public class Pessoa { public String getNome(){ return nome; } public void setNome(String nome){ this.nome = nome; } public String getTelefone(){ return telefone; } public void setTelefone(String telefone){ this.telefone = telefone; } private String nome; private String telefone; Pessoa(String nome, String telefone){ this.nome = nome; this.telefone = telefone; } void exibir(){ System.out.println(getNome()+" :: "+getTelefone()); } } //Abaixo a classe Profissional, derivada da classe Pessoa. public class Profissional extends Pessoa { private String profissao; private String empresa; public String getProfissao(){ return profissao; } public void setProfissao(String profissao){ this.profissao = profissao; } public String getEmpresa(){ return empresa; } public void setEmpresa(String empresa){ this.empresa = empresa; } Profissional(String nome, String telefone, String profissao, String empresa){ super(nome, telefone); this.profissao = profissao; this.empresa = empresa; } @Override public void exibir(){ super.exibir(); System.out.println("\tTrabalha como "+profissao+"no(a) "+empresa+"."); } } Minha dúvida é: como posso corrigir o problema sem tirar a maneira dinâmica do sistema e se da maneira como fiz não irá gerar outros erros ou poderia fazer de uma maneira mais simples.
      Desde já agradeço!
    • By gfontan1910
      Olá boa tarde. Preciso de uma ajuda na criação de um mapa do Brasil de forma dinâmica de modo que seja possível clicar nos estados. Assim que selecionado um estado, preciso exibir algumas informações deste determinado estado. O mapa seria algo parecido com esse da home do Olx (https://olx.com.br).
       
      Alguém pode ajudar com algum material voltado para este tipo de desenvolvimento?
       
       
      Obs: tem um tópico sobre isso no fórum, porém de 2015 e muitos links que foram recomendados estão off atualmente
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.