Olá
Eu tou a criar um script para remover os markers e colocar so os markers especificos, mas so está a funcionar uma vez se eu depois tentar selecionar outro filtro os markers aparecem todos de volta e nao apagam e colocam os markers especificos, alguem me pode ajudar com o script?
Ao entrar na pagina:
Com o filtro Masc selecionado: (so aparece o marker no porto)
Com o filtro Fem selecionado: (a marker do porto devia desaparecer)
O marker do Fem como ta selecionado o marker do porto devia selecionar, basicamente o que devia fazer era apagar os markers antigos novos e marcar os markers que o select indica... alguem sabe como fazer isso?
Codigo:
function LoadJsonData() {
var jsondata;
$.ajax({
url: './json/dados.json',
dataType: 'json',
async: false,
success: function(json){
jsondata = json;
}
});
return jsondata;
}
var map;
var markers = [];
function initMap() {
var jsondata = LoadJsonData();
map = new google.maps.Map(document.getElementById('map'),
{
center: { lat: 38.736946, lng: -9.142685 },
zoom: 7,
});
for (var i = 0; i < jsondata.length; i++) {
var iconBase = './imagens/iconmapa2.png';
var obj = jsondata[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(obj.latitude, obj.longitude),
map: map,
title: obj.title,
id: obj.id,
visible: true,
icon: iconBase
});
markers.push(marker);
}
}
function setMapOnAll(map) {
var iconBase = './imagens/iconmapa2.png';
for (var i = 0; i < markers.length; i++) {
if(markers[i].visible == true)
{
var marker = new google.maps.Marker({
position: markers[i].position,
map: map,
title: markers[i].title,
id: markers[i].id,
visible: true,
icon: iconBase
});
}
else
{
markers[i].setMap(null);
}
}
}
$(document).on("click", "#btnBuscar", function () {
var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
var filtroSexo = $("#Sexo option:selected").text();
var filtroRecursoArma = $("#RecursoArma option:selected").text();
var filtroDistrito = $("#Distrito option:selected").text();
var arrayResultados = jsondata.filter(function (item) {
var criteria = true;
if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
if (filtroSexo != null && filtroSexo != "")
criteria = criteria && item["Sexo"] == filtroSexo;
if (filtroRecursoArma != null && filtroRecursoArma != "")
criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
if (filtroDistrito != null && filtroDistrito != "")
criteria = criteria && item["Distrito"] == filtroDistrito;
return criteria;
});
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
var iconBase = './imagens/iconmapa2.png';
for (var i = 0; i < arrayResultados.length; i++) {
var marker = new google.maps.Marker({
position: markers[arrayResultados[i].id-1].position,
map: map,
title: markers[arrayResultados[i].id-1].title,
id: markers[arrayResultados[i].id-1].id,
visible: true,
icon: iconBase
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="escolha">
<form id="selectsfiltro">
<h6>Faixa Etaria:</h6>
<select id="FaixaEtaria" class="custom-select">
<option></option>
<option value="1">0-17</option>
<option value="2">18-25</option>
<option value="3">26-35</option>
<option value="4">36 ou mais</option>
</select>
<br />
<br />
<h6>Sexo:</h6>
<select id="Sexo" class="custom-select">
<option></option>
<option value="5">Masc</option>
<option value="6">Fem</option>
</select>
<br />
<br />
<h6>Recurso a arma:</h6>
<select id="RecursoArma" class="custom-select">
<option></option>
<option value="7">Sim</option>
<option value="8">Não</option>
</select>
<br />
<br />
<h6>Localidade:</h6>
<select id="Distrito" class="custom-select">
<option></option>
<option value="9">Viana do Castelo</option>
<option value="10">Vila Real</option>
<option value="11">Bragança</option>
<option value="12">Braga</option>
<option value="13">Porto</option>
<option value="14">Aveiro</option>
<option value="15">Viseu</option>
<option value="16">Guarda</option>
<option value="17">Coimbra</option>
<option value="18">Castelo Branco</option>
<option value="19">Leiria</option>
<option value="20">Lisboa</option>
<option value="21">Santarém</option>
<option value="22">Portalegre</option>
<option value="23">Évora</option>
<option value="24">Setúbal</option>
<option value="25">Beja</option>
<option value="26">Faro</option>
<option value="27">Açores</option>
<option value="28">Madeira</option>
</select>
</form>
<br>
<div class="botesdefiltrar">
<button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
</div>
</div>
<div id="map" class="googlemap"></div>