Jump to content

Question

1 answer to this question

Recommended Posts

  • 0

Esse negócio funciona assim:

 

Você tem uma identificação no elemento de rolagem que é relacionado ao ponto a ser exibido no mapa.

E também um evento que dispara ao rolar e captar o elemento em destaque.

Esse evento altera o ponto em destaque no mapa e centraliza no iframe do mapa.

 

A identificação do elemento é o atributo data-slug da section, o valor de data-slug é linkado com o valor de algum atributo  do elemento do marcador do mapa, mas eu não consegui identificar, mas com isso acho que você já consegue iniciar.

 

Só pra complementar:

Acredito que esse é o arquivo que faz essa interação: https://cdn0.vox-cdn.com/presto/map_stack.1297bd68e8af7af81f6d.js

 

PS: Se quiser começar e por no github e compartilhar aqui eu dou uma ajudada pq achei interessante esse negócio.

 

PS 2: Provavelmente esse evento é um plugin js ja pronto adaptado, mas aparentemente não deve ser muito complicado de ser feito.

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 scsrat
      Preciso de ajuda com infowindow para polygonos multiplos está abrindo popup em todos com nome do ultimo lançamento somente, não estou dando conta em java, alguém se habilita?
       
      <?php      include 'export_xml.php'; ?> <html>     <head>         <meta charset='utf-8' />         <title>Google Maps: Storing Polygons in database</title>         <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDao9cuBBnlx14GWyG8ZnfZ1WjHj9oa6DA&callback=initMap"></script>         <script>                                  function initialize() {               var mapOptions = {                 zoom: 14,                 center: new google.maps.LatLng(-22.247791, -53.348142),                 mapTypeId: google.maps.MapTypeId.ROADMAP               };               var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);               var arr = new Array();               var polygons = [];               var bounds = new google.maps.LatLngBounds();                                             var xml = xmlParse(xmlString);               var subdivision = xml.getElementsByTagName("subdivision");                                                                for (var i = 0; i < subdivision.length; i++) {                 arr = [];                 html = [];                 var name = xml.documentElement.getElementsByTagName("subdivision").getAttribute("name");                 var address = xml.documentElement.getElementsByTagName("subdivision").getAttribute("address");                 var html = "<b>" + name + "</b> <br/>" + address + "<br><a href=# target=_blank>Clique aqui";                 //Tentando pegar dados dos polygons individuais                 var coordinates = xml.documentElement.getElementsByTagName("subdivision").getElementsByTagName("coord");                 for (var j = 0; j < coordinates.length; j++) {                   arr.push(new google.maps.LatLng(                     parseFloat(coordinates[j].getAttribute("lat")),                     parseFloat(coordinates[j].getAttribute("lng"))                   ));                   bounds.extend(arr[arr.length - 1])                 }                 polygons.push(new google.maps.Polygon({                   paths: arr,                   title: html,                   strokeColor: '#FF0000',                   strokeOpacity: 0.8,                   strokeWeight: 2,                   fillColor: '#FF0000',                   fillOpacity: 0.35                                    }));                 polygons[polygons.length - 1].setMap(map);                                  var infowindow = new google.maps.InfoWindow({                                        content: html // Tentando pegar dados dos polygons individuais                 });                                  google.maps.event.addListener(polygons[polygons.length - 1], 'click', function(event) {                     infowindow.open(map);                     infowindow.setPosition(event.latLng);                 });                                }                              // });               map.fitBounds(bounds);             }                          var xmlString = '<?php echo $textolinha; ?>';                          /**              * Parses the given XML string and returns the parsed document in a              * DOM data structure. This function will return an empty DOM node if              * XML parsing is not supported in this browser.              * @param {string} str XML string.              * @return {Element|Document} DOM.              */             function xmlParse(str) {               if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {                 var doc = new ActiveXObject('Microsoft.XMLDOM');                 doc.loadXML(str);                 return doc;               }               if (typeof DOMParser != 'undefined') {                 return (new DOMParser()).parseFromString(str, 'text/xml');               }               return createElement('div', null);             }             google.maps.event.addDomListener(window, 'load', initialize);                      </script>         <style>             #map-canvas,             body,             html {               height: 100%;               width: 100%;             }                      </style>     </head>     <body>                  <div id="map-canvas"></div>     </body> </html>  
       
      O include export_xml.php: Saida do xml
       
      <subdivisions> <subdivision name="teste1" address="0" > <coord lat="-22.246906181604235" lng="-53.343656079469014" /> <coord lat="-22.246160343589366" lng="-53.34298025442864" /> <coord lat="-22.246612168987966" lng="-53.34231238438393" /> <coord lat="-22.24577306351632" lng="-53.34163110329415" /> <coord lat="-22.246309297178513" lng="-53.34088544918801" /> <coord lat="-22.24709286679633" lng="-53.34152917935158" /> <coord lat="-22.247917069182467" lng="-53.342210460441365" /> <coord lat="-22.24876923872473" lng="-53.34288149840766" /> <coord lat="-22.248292595053044" lng="-53.343581554960544" /> <coord lat="-22.247442990211773" lng="-53.34287048089961" /> </subdivision> <subdivision name="teste2" address="0" > <coord lat="-22.24744605203327" lng="-53.3428707695716" /> <coord lat="-22.24664667240292" lng="-53.34224581487113" /> <coord lat="-22.24714566457059" lng="-53.341564533781344" /> <coord lat="-22.247922698585814" lng="-53.342200217317874" /> </subdivision> </subdivisions>  
    • By juliomarques75
      Olá pessoal, estou aqui para pedir ajuda, mas não para me dar mastigado nada, mas alguém que possa me mostrar o caminho das pedras para minha duvida.
      Seguinte, como faço para o site abrir determinada área ou pagina, de acordo onde ele esta acessando?
      Exemplo, se estou na cidade "B" ele abre determinada pagina, e se vou para a cidade "F" ele abre outra pagina, falo assim pq cada pagina vai possuir uma determinada consulta ao banco de dados e realizar a pesquisa em uma tabela especifica para aquela região.
      Se alguém puder me ajudar e me orientar pra que lado seguir agradeço muito...
       
      Abraço a todos!
    • By ZioNN
      Estou tentando implementar lazy loading em um mapa do Google Maps que temos na home-page do site do cliente. É um iframe padrão do Maps no formato
       
      <iframe  src="https://www.google.com/maps/d/u/1/embed?mid=1qBlmrpdrcg46Esp-C88T1AMseNdz9k" width="100%" height="530"></iframe>
      Já tentei 3 plug-ins que encontrei em pesquisas na net, e nenhum deles funcionou. 

      O mapa é o item que mais pesa no carregamento inicial da home-page e está nos custando muito tempo e peso de loading.

      Foram:

      Lazyframe master
      Lazy Maps
      Jquery Lazy Master

      Qual a melhor solução para este caso, sem remover o mapa? 

      Obrigado
    • By Webster Moitinho
      Estou tentando criar log de acessos em Banco de Dados com base em IP e Geolocalização. Para tanto estou usando um script disponibilizado por GeoIP-DB. Quando faço o teste local, dá tudo certo. Me dá a minha cidade, cep, latitude longitude... Porém, quando subo para a nuvem, ele mostra esses dados do servidor, e não os meus.
      Meu código php está assim:
      date_default_timezone_set('America/Sao_Paulo'); $json = file_get_contents('https://geoip-db.com/json'); $data = json_decode($json); $cidade = $data->city; $cep = $data->postal; $lat = $data->latitude; $long = $data->longitude; $PDO = new PDO( 'mysql:host=' . HOST . ';dbname=' . DB, USER, PASS ); $sql = "INSERT INTO `stat` (`id_stat`, `cidade`, `cep`, `latitude`, `longitude`) VALUES (NULL, $cidade, $cep, $lat, $long)"; $compile = $PDO->prepare($sql);  
    • By tarcioblanco@gmail.com
      Olá pessoal!
       
      Sou bem iniciante em programação (o projeto será quase todo terceirizado).
      Estou desenvolvendo um projeto de roteirização de entregas.
      O ideal seria ele rodar em WEB porém preciso de interface mobile para que os motoristas recebam as notificações do percurso e locais que precisam fazer as entregas entre outros, além de interface com impressoras na rede local.
      Seria o seguinte: o sistema precisa roteirizar as entregas dos motoristas, definindo a distribuição das entregas entre os motoristas (baseado em horário limite para entrega, posso ter 10 entregas que precisam ser feitas dentro de uma janela de 60 minutos por exemplo), então o sistema deveria dividir essas entregas entre os motoristas disponíveis, assim como a sequencia das entregas. pensando em otimizar tempo a agilizar as entregas. Além de notificar atrasos e informar que não é mais possivel adicionar entregas para tal horário pois as entregas existentes já consumiram o tempo disponível dos motoristas.
      Além da distribuição de roteiros, o sistema precisará de outras funções básicas como dashboard, recebimento de pedidos, encaminhar ordem de separação para o almoxarifado, acompanhamento dos entregadores no mapa, relatório sobre eficiência de cada motorista e integração com outros sistemas via Json (para receber os pedidos de entrega)
      Como é um sistema que ainda não existe, a ajuda que eu preciso é justamente sobre dicas de qual linguagem usar para criar esse sistema com foco em tempo de programação.
       
      Agradeço demais quem puder ajudar!
×

Important Information

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