3

pontos.php retorna um Json com os marcadores do mapa

[
    {
        "Id": 1,
        "Latitude": -19.212355602107472,
        "Longitude": -44.20234468749999,
        "Descricao": "Conteúdo do InfoBox 1"
    },
    {
        "Id": 2,
        "Latitude": -22.618827234831404,
        "Longitude": -42.57636812499999,
        "Descricao": "Conteúdo do InfoBox 2"
    },
    {
        "Id": 3,
        "Latitude": -22.57825604463875,
        "Longitude": -48.68476656249999,
        "Descricao": "Conteúdo do InfoBox 3"
    },
    {
        "Id": 4,
        "Latitude": -17.082777073226872,
        "Longitude": -47.10273531249999,
        "Descricao": "Conteúdo do InfoBox 4"
    }]

Ao carregar o mapa, consulta o arquivo que carrega os pontos

function carregarPontos() {

    $.getJSON('js/pontos.php', function(pontos) {

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

        $.each(pontos, function(index, ponto) {

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(ponto.Latitude, ponto.Longitude),
                title: "Meu ponto",
                icon: 'img/marcador.png'
            });

            var myOptions = {
                content: "<p>" + ponto.Descricao + "</p>",
                pixelOffset: new google.maps.Size(-150, 0)
            };

            infoBox[ponto.Id] = new InfoBox(myOptions);
            infoBox[ponto.Id].marker = marker;

            infoBox[ponto.Id].listener = google.maps.event.addListener(marker, 'click', function (e) {
                abrirInfoBox(ponto.Id, marker);
            });

            markers.push(marker);

            latlngbounds.extend(marker.position);

        });

        var markerCluster = new MarkerClusterer(map, markers);      
        map.fitBounds(latlngbounds);

    });

}

function initialize() { 
    var latlng = new google.maps.LatLng(-18.8800397, -47.05878999999999);

    var options = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("mapa"), options);
}

initialize();
carregaPontos();

Preciso que o arquivo pontos.php traga os marcadores levando em conta o posicionamento do mapa, a cada movimento no mapa (ação de arrastar, movimentar ou dar zoom) precisa trazer os marcadores dessa área visivel (por exemplo se estou com zoom em Belo Horizonte visivel no mapa deveria trazer marcadores nessa região, ao mudar o zoom ou movimentar o mapa para outra região preciso gerar uma nova consulta, não necessariamente uma cidade apenas, e sim a região de mapa visivel, podendo ser um bairro ). Isso para não precisar trazer todos os marcadores cadastrados toda a vez. Como faço para restringir a consulta? Preciso inserir mais informações tanto no JS quanto no PHP, porém não encontrei exemplos disso.

Estou fazendo na api para plataforma web.

1 Resposta 1

1

Há um evento chamado quando o usuário para de arrastar o mapa:

map.addListener('idle', function () {} );

Você pode pegar os pontos visiveis do mapa usando o bounds():

var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();

Ai obtendo as posições:

var sudoeste_latitude = southWest.lat();
var sudoeste_longitude = southWest.lng();
var nordeste_latitude = northEast.lat();
var nordeste_longitude = northEast.lng();

Manda essas posições para o PHP e tras somente o que estiver dentro dela. Não consigo passar um exemplo mais claro agora. Se não conseguir com esse código a noite eu tento de ajudar mais. Resultado final :

map.addListener('idle', function () {
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var sudoeste_latitude = southWest.lat();
    var sudoeste_longitude = southWest.lng();
    var nordeste_latitude = northEast.lat();
    var nordeste_longitude = northEast.lng();

    //chama o PHP para pegar só quem está dentro deste campo e mostra os markers
});

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 .