1

Estou tendo problemas para apagar objetos do tipo circulo (API google-maps) que estão sendo mostrados em meu mapa.

Eu possuo uma função que recebede dados JSON e cria um array global (arrayElementos) contendo objetos (elemento) que possuem: informações JSON e um objeto (circulo) circulo da API do google maps. Quando eu faço uma pesquisa ( recebo um novo JSON), eu acesso arrayElementos, e para cada elemento, eu acesso o circulo e executo a função circulo.setMap(null), porém, o problema é que alguns circulos apagam enquanto outros permanecem. Já fiz debug, mas n consegui identificar o erro.

var arrayElementos = [];

function setMapElements(mJsonData) {


    if(arrayElementos.length==0){

        var elementOptions = {
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map,
            center: {},
            radius: Math.sqrt(1) * 50
        };

        var elemento = {

            idade:{},
            genero:{},
            circulo:{}
        };

        $.each(mJsonData, function(id,data){

            elementOptions.center = new google.maps.LatLng(data.latitude,data.longitude);

            elemento.genero = data.sexo;
            elemento.idade = data.idade;
            elemento.circulo = new google.maps.Circle(elementOptions);

            mapElements.push(elemento);
        });

    }else{

        $.each(arrayElementos, function(id,elemento){

            elemento.circulo.setMap(null);

        });

        arrayElementos = [];

        setMapElements(mJsonData);
    }

};
1
  • Não tenho como testar se minha resposta resolve completamente o seu problema. Próxima vez tente criar uma versão simplificada do seu problema que caiba toda dentro da sua pergunta e não dependa de google maps, vetores globais de json, etc. Se for pequeno o suficiente pra não precisar de barra de rolagem melhor ainda :)
    – hugomg
    Commented 25/03/2015 às 1:18

1 Resposta 1

2

Você está criando um único objeto elemento e sobrescrevendo seus campos em cada iteração do loop.

 var elemento = {
    idade:{},
    genero:{},
    circulo:{}
};

$.each(mJsonData, function(id,data){

    elementOptions.center = new google.maps.LatLng(data.latitude,data.longitude);

    elemento.genero = data.sexo;
    elemento.idade = data.idade;
    elemento.circulo = new google.maps.Circle(elementOptions);

    mapElements.push(elemento);
});

Ao invés de reutilizar um único elemento, crie um novo a cada passo:

$.each(mJsonData, function(id,data){

    elementOptions.center = new google.maps.LatLng(data.latitude,data.longitude);

    mapElements.push({
        genero : data.sexo,
        idade : data.idade,
        circulo : new google.maps.Circle(elementOptions)
    });
});

Um programa mais simples que ilustra o seu bug é esse aqui:

var obj = {}
var lista = [];
for(var i=0; i<10; i++){
    obj.x = i;
    lista[i] = obj;
}
obj.y = 17;

Se você imprimir o conteúdo da lista no final, você vai ver que todos os campos apontam pro mesmo objeto.

1
  • Obrigado, não havia percebido este erro!
    – regmoraes
    Commented 25/03/2015 às 1:29

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 .