1

estou tendo dificuldade em realizar a seguinte tarefa:

Estou desenvolvendo um mapa em javascript, utilizando a api do google maps, esse mapa consome um json com varias concessionárias, e ao mesmo tempo, devo exibir uma lista (abaixo do mapa) com essas mesma concessionárias, porém só deve ser exibida as concessionarias que estão naquela visualização do mapa, por exemplo se o mapa estiver com o zoom do brasil, vai exibir as concessionárias no brasil todo, mas, se tiver com o zoom olhando guarulhos, irá exibir a lista das concessionárias apenas de guarulhos.

Esta parte já está funcionando, porém o mapa está pegando as concessionárias mais próximas das laterais primeiro, quando na verdade o que eu preciso é pegar do centro para as laterais.

O código que faz o autocomplete do campo de busca é o seguinte:

RntMapCCs.initAutocomplete = function() {

  input = document.getElementById('pac-input');
  searchBox = new google.maps.places.SearchBox(input);

  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });


  searchBox.addListener('places_changed', function() {
    places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    var bounds = new google.maps.LatLngBounds();

    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }


      if (place.geometry.viewport) {
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });

    map.fitBounds(bounds);
  });
};

e o código que gera as listas é o seguinte:

RntMapCCs.createListDealers = function(){

    setTimeout(function() {

       var bounds = map.getBounds();

        for(var i = 0; i < markers.length; i++){ // looping through my Markers Collection

          if(bounds.contains(markers[i].position)){


            if(markers[i].cc.premium == true) {
              listDealersPremium(); 
            }
            else {
              listDealers();
            }

          }
        }



        function listDealers() {
          var template =
          '<li>'+
            '<a href="#">'+
              '<div class="title">'+markers[i].cc.name+'</div>'+
              '<div class="content">'+markers[i].cc.address+'</div>'
            '</a>'+
          '</li>'

          $("#list-dealers").each(function(){
              $(this).append(template);
          });

          $(window).on("load",function(){
              $(".content").mCustomScrollbar();
          });
        }

         function listDealersPremium() {
          var template =
          '<li>'+
            '<a href="#">'+
              '<div class="title">'+markers[i].cc.name+'</div>'+
              '<div class="content">'+markers[i].cc.address+'</div>'
            '</a>'+
          '</li>'

          $("#list-dealers-premium").each(function(){
              $(this).append(template);
          });
        }

    },0);
};

Desde já agradeço qualquer ajuda!

0

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

Pesquise outras perguntas com a tag .