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 Marcones Borges
      Olá boa tarde!
      Tenho 3 select e não estou conseguindo habilita-los pela seleção a ideia é selecionar tipo 1 habilita select 1, 2 habilita select 2.

        <select class="form-control input-sm" name="principal" id="principal">                       <option value="select1">Ativa select 1</option>                         <option value="select2">Ativa select 2</option>                       </select>   <select class="form-control input-sm" name="select1" id="select1">                       <option value="opção 1">opção 1</option>                         <option value="opção 2">opção 2</option>                         <option value="opção 3">opção 3</option>                       </select>   <select class="form-control input-sm" name="select2" id="select2">                       <option value="opção 7">opção 7</option>                         <option value="opção 8">opção 8</option>                         <option value="opção 9">opção 9</option>                       </select> //Java script <script type='text/javascript'> var principal = $("#principal"); var select1 = $("#select1"); var select2 = $("#select2"); inst.bind("input", function () {     principal.val("");     select1.val("");     select1.attr("list", null)     var option = $(inst.prop("list")).find("option[value='" + inst.val() + "']");     if (option != null && option.length > 0) {         principal.attr("list", "_" + option.attr("data-value"));     } else {                 principal.attr("list", null)     } }); </script>  
       
      Não consigo colocar pra funcionar...
       
      alguém me ajude um! 
       
    • By Jefferson andre
      Saudacoes mestres,
       
      Estou com a seguinte situacao e nao sei resolver, em um formulario apos selecionar o cliente preciso pegar determinados valores de uma array e preencher os respectivos campos no mesmo formulario.
       
      O select do campo cliente ja tem as informacoes dos demais campos que vou precisar.
       
      Estou usando uma rotina em javascript que verifica a mudanca no campo e que agora precisa ser modificada para pegar os dados e dar retorno dos campos
       
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
          <script type="text/javascript">
              $('#estado').on('change',function() {
              alert($(this).val());
              console.log($(this).val());
              });
          </script>
       
      na rotina acima ao mudar o valor do campo aparece uma mensagem na tela, entao pensei em pegar a mesma ideia e preencher os valores dos campos.
       
      Agradeço a ajuda e sugestoes.
    • By Pitag346
      Pessoal, alguem me ajuda...
       
      Como consigo fazer com que um SELECT, adicione campos ao meu formulário....
       
      Tenho um SELECT onde existe a quantidade, esse select tem de 1 a 3 .... Por padrão ele é definido como 1 ou seja 1 campo...
      Gostaria de adicionar campos conforme essa quantidade, se o select estiver com o NUMERO 2... Adiciona 2 campos, se tiver 3 ele adiciona 3 campos e se tiver 1, apenas 1 campo.
       
       
      Alguem conseguiria me ajudar ? tentei fazer com a propriedade FOR porem... ela me retorna sempre mais campos do que eu preciso realmente. Obrigado.
    • 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*/  
×

Important Information

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