0

Estou criando um mapa, para apresentar uma série de informações, usando o google maps v3.

Resolvi trabalhar com 2 arquivos Json, para preenchimento do mapa. O primeiro arquivo contem as informações de Latitude e Longitude dos pontos do mapa, e o segundo contem as informações da InfoWindow.

Até aí tudo bem, consegui preencher o mapa e buscar as informações da InfoWindow no outro arquivo.

Agora gostaria de aplicar filtros neste mapa, para segmentar os dados. É nesta parte que estou com problema, o filtro precisa ser aplicado no segundo arquivo, e com isto filtrar o primeiro, para setar apenas os pontos de interesse, irão existir mais de 1 filtro para o mapa.

Estou me batendo com isto, alguém já precisou fazer algo semelhante?

Alguma ideia? Fiz algumas tentativas mas sem sucesso até agora.

Segue meu fonte até agora (Preenchendo o mapa e setando a InfoWindow).

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>TESTE</title>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #dvMap { height: 80% }
    </style>
<script async defer
  src="https://maps.googleapis.com/maps/api/js">
</script>
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
 <script type="text/javascript" src="lat_long.js"></script>
 <script type="text/javascript" src="saida.js"></script>
 <script type="text/javascript">


window.onload = function () {
    LoadMap();
}

function LoadMap() {

    var mapOptions = {
        center: new google.maps.LatLng(-15.79414, -47.88254),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var conteudo = ards;
    //var infoWindow = new google.maps.InfoWindow();
    var infoWindow = new google.maps.InfoWindow({
            minWidth: 200,
            maxWidth: 4000,
            minHeight: 100,
            minHeight: 2500
    });
    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

    for (var i = 0; i < lat_long.length; i++) {
        var dataCarga = lat_long[i];
        var myLatlng = new google.maps.LatLng(dataCarga.LATITUDE, dataCarga.LONGITUDE);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: dataCarga.ARMARIO_SITE
        });
        (function (marker, dataCarga) {
            google.maps.event.addListener(marker, "click", function (e) {

                var as=$(conteudo).filter(function (i,n){
                    return n.ARMARIO_ERB===marker.getTitle();
                });
                var conteudo_info = "";
                for (var i=0;i<as.length;i++)
                {
                    conteudo_info +=    as[i].UF + "  " +
                                        as[i].DESC_CLUSTER + "  " +
                                        as[i].LOCALIDADE + "  " +
                                        as[i].DESC_MES_CRIACAO + "  " +
                                        as[i].MOTIVO + "  " +
                                        as[i].SISTEMA + "  " +
                                        as[i].TIPO_ACESSO + "  " + 
                                         + "<br>" ;
                }

                infoWindow.setContent("<div>" + conteudo_info + "</div>");
                infoWindow.open(map, marker);                   
            });
        })(marker, dataCarga);
        latlngbounds.extend(marker.position);
    }
}
</script>
  </head>
  <body>
    <div id="dvMap"></div>
  </body>
</html>

Abaixo o exemplo dos Json:

var lat_long = [
      {
         "ARMARIO_SITE": "ACRBO_O1A01",
         "LONGITUDE": -67.80921,
         "LATITUDE": -9.971221
      },
      {
         "ARMARIO_SITE": "ACRBO_O1A02",
         "LONGITUDE": -67.81101,
         "LATITUDE": -9.960082
      },
      {
         "ARMARIO_SITE": "ACRBO_O1I01",
         "LONGITUDE": -67.81749,
         "LATITUDE": -9.969712
      }
];

var ards = [
    {
        "LOCALIDADE":"FEIRA DE SANTANA",
        "TIPO_CLIENTE":"Padrão",
        "TIPO_ACESSO":"METALICO",
        "UF":"BA",
        "DESC_MES_CRIACAO":"JANEIRO",
        "DESC_CLUSTER":"FEIRA DE SANTANA",
        "ARMARIO_ERB":"ACRBO_O1A01",
        "TIPO_RECLAMACAO":"TT",
        "CLIENTE_RECENTE":"N"
    },
    {
        "LOCALIDADE":"FEIRA DE SANTANA",
        "TIPO_CLIENTE":"Padrão",
        "TIPO_ACESSO":"METALICO",
        "UF":"BA",
        "DESC_MES_CRIACAO":"JANEIRO",
        "DESC_CLUSTER":"FEIRA DE SANTANA",
        "ARMARIO_ERB":"ACRBO_O1A01",
        "TIPO_RECLAMACAO":"TT",
        "CLIENTE_RECENTE":"N"
    },
    {
        "LOCALIDADE":"FEIRA DE SANTANA",
        "TIPO_CLIENTE":"Premium",
        "TIPO_ACESSO":"METALICO",
        "UF":"BA",
        "DESC_MES_CRIACAO":"JANEIRO",
        "DESC_CLUSTER":"FEIRA DE SANTANA",
        "ARMARIO_ERB":"ACRBO_O1A02",
        "TIPO_RECLAMACAO":"TT",
        "CLIENTE_RECENTE":"N"
    },
    {
        "LOCALIDADE":"FEIRA DE SANTANA",
        "TIPO_CLIENTE":"Premium",
        "TIPO_ACESSO":"CABO",
        "UF":"BA",
        "DESC_MES_CRIACAO":"JANEIRO",
        "DESC_CLUSTER":"FEIRA DE SANTANA",
        "ARMARIO_ERB":"ACRBO_O1I01",
        "TIPO_RECLAMACAO":"TT",
        "CLIENTE_RECENTE":"N"
    },
    {
        "LOCALIDADE":"FEIRA DE SANTANA",
        "TIPO_CLIENTE":"Residencial",
        "TIPO_ACESSO":"METALICO",
        "UF":"BA",
        "DESC_MES_CRIACAO":"JANEIRO",
        "DESC_CLUSTER":"FEIRA DE SANTANA",
        "ARMARIO_ERB":"ACRBO_O1I01",
        "TIPO_RECLAMACAO":"TT",
        "CLIENTE_RECENTE":"N"
    }
];

Obrigado.

4
  • Não seria mais fácil trabalhar com o conteúdo dos dois arquivos em uma mesma coleção, como objetos compostos?
    – OnoSendai
    1/02/2016 às 18:13
  • @lbotinelly Como funcionaria este objeto composto? Desculpe minha ignorância, não sou programador. Pensei nesta solução, pois para cada lat_long, posso ter 10~15 registros de conteúdo na Infowindow.. Aí fiz isto para não duplicar as localidades.. 1/02/2016 às 18:25
  • Posso tentar mostrar como se faz se você postar exemplos de conteúdo correlacionado de cada arquivo.
    – OnoSendai
    1/02/2016 às 18:28
  • @lbotinelly adicionei no post um exemplo dos arquivos, a ligação deles é pelo ARMARIO_ERB e ARMARIO_SITE, no lat_long são únicos e no ards podem existir vários registros pra cada ARMARIO_SITE. 1/02/2016 às 18:43

1 Resposta 1

0

Consegui realizar multiplos filtros utilizando bases distintas.

Segui a ideia deste projeto Marker-Filtering-Google-Maps. Que trabalha de uma maneira muito bem organizada, fiz algumas adaptações apenas, para meus cenários.

Consegui vincular as bases fazendo buscas e setando novos arrays. Exemplos:

//Para a InfoWindow usei assim.
var as=$(ards).filter(function (i,n){
     return n.ARMARIO_ERB===marker.getTitle();
});

//Para eliminar duplicados
$.each(results, function(index, value) {
    if ($.inArray(value.ARMARIO_ERB, armarios)==-1) {
        armarios.push(value.ARMARIO_ERB);
    }
});

//Buscar a lat_long unica
for(var j = 0; j < armarios.length; j++){
    $.grep( lat_long, function( n, i ) {
        if(n.ARMARIO_SITE===armarios[j]){
            localizacoes.push( n );
        }
    });             
}

Funcionou perfeitamente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .