eliminare marker da mappa

**alex_mac88** · 05-04-2012, 14:46

Ragazzi, io ho una seria di checkbox che hanno un determinato valore, al click vorrei che nella mappa mi fossero mostrati solo le checkbox selezionate, e fino a qui ci sono, funziona benissimo, il problema sta nel rimuovere il marker dalla mappa come posso fare?
E' ovvio che deve eliminare solo i marker appartenete alla checkbox in seguito deselezionata.

codice:

<input class="chek" type="checkbox" value="1" />Alberghi 
 
<input class="chek" type="checkbox" value="3" />Case Vacanze 
 
<input class="chek" type="checkbox" value="4" />Shopping 

<input class="chek" type="checkbox" value="5" />Ristorazione


<script type="text/javascript">

(function() {
window.onload = function(){

var latlng = new google.maps.LatLng(37.8530665, 15.287916300000006); 
var options = { 
zoom: 14,
center: latlng,
backgroundColor: '#fff',
mapTypeId: google.maps.MapTypeId.ROADMAP
}; 



var map = new google.maps.Map(document.getElementById('map_canvas'), options);



$(".chek").click(function() {
var id_checkbox = $(this).val();
var markers = [];

function AddMarker(lat,name,icon,id) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: lat,
map: map,
icon: icon,
title: name
});
markers[id] = marker;
}

if($(this).is(':checked')) {


$.post("ajax.php",{ type:id_checkbox,page: "mapHome" }, function(data) {	
	for (i=0; i < data.marker.length; i++) { 
		var lat = new google.maps.LatLng(data.marker[i].latitude, data.marker[i].longitude); 
		AddMarker(lat, data.marker[i].nome, data.marker[i].marker, data.marker[i].id_cat);
	}// ciclo for
},"json");//ajax

} else {
//devo rimuovere marker

}





});


}
})();
</script>

**corvallo** · 05-04-2012, 21:54

Ciao
ho avuto tempo fa lo stessa esigenza, sono andato a rispulciare il codice che avevo creato.
Io ho usato questo codice

codice:

if (markers) {
		  for (i in markers) {
				      markers[i].setMap(null);
				    }
markers.length=0;
}

con questo codice però cancelli tutti i markers presenti sulla mappa.
Quindi dovresti scegliere il marker che è associato alla checkbox ed eliminarlo con markers[i].setMap(null)

(Sinceramente non ho ben capito cosa intendi con il ciclo for all'interno della richiesta ajax. Prendi uno o più marker da quel ciclo?)
Spero ti sia utile ciao

**alex_mac88** · 06-04-2012, 10:38

ciao grazie per l'aiuto, cosi facendo non posso sapere quale marker devo eliminare, perchè io dovrei passare come indice numerico delle array il suo numero di categoria, ma non funziona.

**alex_mac88** · 06-04-2012, 15:13

nessuno riesce allora?

**Vindav** · 06-04-2012, 15:42

posta il json che arriva al client e la parte html interessata

http://forum.html.it/forum/showthrea...readid=1501694

Potrebbe essere qualcosa del genere:

codice:

for (i = 0; i < markers.length; i++) {
				if(id_checkbox == markers[i].id_cat) {
					markers[i].setMap(null);
				}
			}

ma senza sapere cosa contiene sto benedetto json si puoi fare solo ipotesi

**alex_mac88** · 06-04-2012, 18:21

ok questo è il json

Codice PHP:


case 'mapHome':

foreach ($q->getSelect('SELECT * FROM property WHERE category_property = '.$id.'') as $key) {

foreach($q->getSelect("SELECT * FROM subcategory_property WHERE id_sub    = ".$key['subcategory_property']."") as $marker) {

$marker = 'http://www.dominio.it/'.$marker['marker'].'';

}

$test['marker'][] = array('id' => ''.$key['id_property'].'', 'nome' => ''.$key['name'].'', 'latitude' =>  ''.$key['latitude'].'', 'longitude' =>

''.$key['longitude'].'', 'marker' => $marker, 'id_cat' => ''.$key['category_property'].'');

}

echo json_encode($test);

break;

**alex_mac88** · 07-04-2012, 16:29

Cosa sbaglio?

**Vindav** · 10-04-2012, 10:38

prova cosi:

codice:

var markers = [];

$(".chek").click(function() {
var id_checkbox = $(this).val();

function AddMarker(lat,name,icon,id,index) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: lat,
map: map,
icon: icon,
title: name
});
markers[index] = marker;
markers[index].id_cat = id;
}

if($(this).is(':checked')) {
$.post("ajax.php",{ type:id_checkbox,page: "mapHome" }, function(data) {	
	for (i=0; i < data.marker.length; i++) { 
		var lat = new google.maps.LatLng(data.marker[i].latitude, data.marker[i].longitude); 
		AddMarker(lat, data.marker[i].nome, data.marker[i].marker, data.marker[i].id_cat,i);
                            	}// ciclo for
},"json");//ajax

} else {
//devo rimuovere marker
for (i = 0; i < markers.length; i++) {
				if(id_checkbox == markers[i].id_cat) {
					markers[i].setMap(null);
				}
			}

}
});

controlla bene il codice perche non ho aggiunto solo l'else, inoltre assicurati che id_cat contenga un valore numerico, deve servire per associare i vari checkbox(id_checkbox) ai rispettivi marker, un esempio di json:

codice:

{"marker":[  			{"latitude":"44.111206","longitude":"9.834749","nome":"aaa","id_cat":"1"},
     			{"latitude":"44.117701","longitude":"9.871722","nome":"bbb","id_cat":"1"},
     			{"latitude":"44.113025","longitude":"9.843195","nome":"ccc","id_cat":"1"},
     			{"latitude":"44.118320","longitude":"9.846319","nome":"ddd","id_cat":"1"}
			]}

**alex_mac88** · 10-04-2012, 15:14

Ma a te funziona cosi? a me no.
Cioè nel senso se io spunto una chekbox e poi senza spuntarne altre, mi elimina i markers.

Ma se io li spunto tutti, o cmq più di una, non elimina più i marker.

codice:

<script type="text/javascript">

(function() {
window.onload = function(){

var latlng = new google.maps.LatLng(37.8530665, 15.287916300000006); 
var options = { 
zoom: 14,
center: latlng,
backgroundColor: '#fff',
mapTypeId: google.maps.MapTypeId.ROADMAP
}; 



var map = new google.maps.Map(document.getElementById('map_canvas'), options);

var markers = [];


$(".chek").click(function() {
var id_checkbox = $(this).val();



function AddMarker(lat,name,icon,id,index) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: lat,
map: map,
icon: icon,
title: name
});
markers[index] = marker;
markers[index].id_cat = id;
}


if($(this).is(':checked')) {


$.post("ajax.php",{ type:id_checkbox,page: "mapHome" }, function(data) {	
	for (i=0; i <= data.marker.length; i++) { 
	var lat = new google.maps.LatLng(data.marker[i].latitude, data.marker[i].longitude); 
	AddMarker(lat, data.marker[i].nome, data.marker[i].marker, data.marker[i].id_cat,i);	
	}// ciclo for
},"json");//ajax

} else {
for (i = 0; i < markers.length; i++) {
				if(id_checkbox == markers[i].id_cat) {
					markers[i].setMap(null);
				}
			}

}





});


}
})();
</script>

codice:

JSON
{"marker":
[
{"id":"1","nome":"Gran Hotel","latitude":"37.85243901866244","longitude":"15.291252264031982","marker":"5star.png","id_cat":"1"},
{"id":"16","nome":"Eljabel","latitude":"37.85135733649974","longitude":"15.283279196434023","marker":"4star.png","id_cat":"1"}
]
}

**Vindav** · 10-04-2012, 16:35

Effettivamente c'erano un paio di errori, l'ho sistemato prova cosi:

codice:

var markers = [];

$(".chek").click(function() {
var id_checkbox = $(this).val();

function AddMarker(lat,name,icon,id) {
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: lat,
map: map,
icon: icon,
title: name
});
arrlength = markers.push(marker);
markers[arrlength-1].id_cat = id;
}

if($(this).is(':checked')) {
$.post("ajax.php",{ type:id_checkbox,page: "mapHome" }, function(data) {	
	for (i=0; i < data.marker.length; i++) { 
		var lat = new google.maps.LatLng(data.marker[i].latitude, data.marker[i].longitude); 
		AddMarker(lat, data.marker[i].nome, data.marker[i].marker, data.marker[i].id_cat);
                            	}// ciclo for
},"json");//ajax

} else {
//devo rimuovere marker
for (i = 0; i < markers.length; i++) {
				if(id_checkbox == markers[i].id_cat) {
					markers[i].setMap(null);
                                                                      markers.splice(i,1);
				}
			}
}
});

Discussione: eliminare marker da mappa

Strumenti discussione

Ricerca discussione

Visualizza

eliminare marker da mappa

Permessi di invio