Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

andersonseifert

Capturar e mostrar dados JSON

Por , em Javascript

Recommended Posts

andersonseifert    10

andersonseifert
Postado

Olá galera, tenho uma pequena duvida como faço para pegar os dados desse Json abaixo e mostrar no campo de outra pagina ?

[
    {
        "Id": 1,
        "Nome": "Mariano",
        "Latitude": -19.5906483,
        "Longitude": -46.944241199999965,
        "Imagem": "01.jpg",
        "Icone": "01.ico"
        
    },
    {
        "Id": 2,
        "Nome": "Balthazar",
        "Latitude": -15.7941454,
        "Longitude": -47.88254789999996,
        "Imagem": "02.jpg",
        "Icone": "02.ico"
    },

Estou desenvolvomendo um trabalho e quero mostrar esses dados no meu mapa abaixo estou fazendo manual quero trocar e fazer importanto os dados do Json

function carregarPontos() {
 
 // Vou adicionar dois pontos manualmente
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(-20.2976178, -40.2957768),
                title: "Colega 02",
                map: map
            });
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(-5.7792569,  -35.20091600000001),
                title: "Colega 02",
                map: map
            });
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

No caso, vc pode usar um AJAX para recuperar os dados do JSON, e então no loop q lê esse json retornado, vc vai criando os seus markers.

Compartilhar este post

Link para o post
Compartilhar em outros sites

andersonseifert    10

andersonseifert
Postado

Bruno entrei na documentação mas nao consegui entender muito bem, tem algum material claro que eu possa entender do 0 ou pelo menos fazer o que estou querendo.

 

api.jquery.com/jQuery.getJSON/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu pensei em algo assim cara:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>


<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
jQuery.getJSON('a.json', function(data){
    data.forEach(function(each){
      setMarker({
        position: new google.maps.LatLng(each.Latitude,  each.Longitude),
        title: each.Nome,
        map: each.Id
      });
    });
  }
)

</script>
<script>
function setMarker(options) {
  console.log(options);
  var marker = new google.maps.Marker(options);
}
</script>
</body>
</html>
sendo a.json:

[
    {
        "Id": 1,
        "Nome": "Mariano",
        "Latitude": -19.5906483,
        "Longitude": -46.944241199999965,
        "Imagem": "01.jpg",
        "Icone": "01.ico"
    },
    {
        "Id": 2,
        "Nome": "Balthazar",
        "Latitude": -15.7941454,
        "Longitude": -47.88254789999996,
        "Imagem": "02.jpg",
        "Icone": "02.ico"
    }
]

Compartilhar este post

Link para o post
Compartilhar em outros sites

andersonseifert    10

andersonseifert
Postado

Bruno seguinte fiz a alteração aqui porem nao me trouxe o conteudo, olha so postei meu codigo aqui para voce entender como vou usar e o print do resultado :

 

Code :
http://pastebin.com/Vvqbgatj

 

Resultado

http://prntscr.com/4gl9ol

 

Estou tentando mostrar a latitude e longitude do cara (no mapa) de acordo com os dados do json

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tinha uma coisinha ou outra errada =)

 

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom:4
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Você está aqui.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

/*BRUNO FORUM*/
function carregarPontos() {
jQuery.getJSON('a.json', function(data){
    data.forEach(function(each){
      setMarker({
        position: new google.maps.LatLng(each.Latitude,  each.Longitude),
        title: each.Nome,
        map: map
      });
    });
  }
)};


function setMarker(options) {
  console.log(options);
  var marker = new google.maps.Marker(options);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent("Conteúdo do marcadora.");
        infowindow.open(map, marker);
    }
  })(marker))
}

</script>

<script defer="DEFER">
//carregarPontos();
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div style="position:fixed;top:0px;"><button onclick="carregarPontos();">Carregar</button></div>
    </body>
</html>
Ainda não deve estar perfeito, mas creio que com isso vc consegue prosseguir.

Compartilhar este post

Link para o post
Compartilhar em outros sites

andersonseifert    10

andersonseifert
Postado

Perfeito velho, em so para conhecimento é aqui entao que seto minhas "variaveis" que estao la no json ?

 setMarker({
        position: new google.maps.LatLng(each.Latitude,  each.Longitude),
        title: each.Nome,
        map: map

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exato.

 

O data.forEach é o loop.

Compartilhar este post

Link para o post
Compartilhar em outros sites

gsilveira    0

gsilveira
Postado

Muito bom, porém notei que o a infoWindow dos marcadores puxados pelo json não estão aparecendo.

Poderia ser algum erro no trecho abaixo?

 

google.maps.event.addListener(marker, 'click', (function(marker, i) {

return function() {

infowindow.setContent("Conteúdo do marcadora.");

infowindow.open(map, marker);

}

})(marker))

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito