markers zoom scale
Me gusta
13987 visitas
-
Buenas compañero, creo que el problema lo tienes en que en el listener del cambio de zoom tienes que volver a recorrer el array y aplicar setIcon, te cambia solo el ultimo por que es el que se queda guardado del for anterior al addListener.
Comenta a ver si así funciona.
Un saludo.-
Hola Fernando, traté de hacer lo que me indicaste y funcionó, a cada zoom le da el tamaño que deseo de marker. Pero se me presenta otro problema:
se superponen, no me borra el anterior. Te paso como quedo:
-
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom=map.getZoom();
if(zoom==15){
for (var i = 0; i < accidentes.length; i++) {var accidente = accidentes[i];
var marker = new google.maps.Marker({
position: {lat: accidente[1], lng: accidente[2]},map: map,icon: markerImage,title: accidente[0]});
marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(30.5, 30.5)));}}
if(zoom==16){
for (var i = 0; i < accidentes.length; i++) {var accidente = accidentes[i];
var marker = new google.maps.Marker({
position: {lat: accidente[1], lng: accidente[2]},map: map,icon: markerImage,title: accidente[0]});
marker.setIcon(new google.maps.MarkerImage('img/delito13.png', null, null, null, new google.maps.Size(61, 61)));}}
});-
El problema esta en que tu no estas recorriendo tu array de marcadores, estas creando nuevos marcadores, por eso se te superponen, debes recorrer el array y aplicarle la función setIcon.
Saludos -
Bueno veo que no creas un array de marcadores, deberías crearlo e ir guardando cada marcador en el mismo para después poder recorrerlos.
Algo así:
var marcadores = [];
for (var i = 0; i < accidentes.length; i++) {
var accidente = accidentes[i];
var marker = new google.maps.Marker({
position: {lat: accidente[1], lng: accidente[2]},
map: map,
icon: markerImage,
//animation: google.maps.Animation.DROP,
title: accidente[0]
});
marcadores[i]= marker;
}-
No hay como ejercitar las neuronas. Me costó pero lo logré con tu ayuda. Generé el array de markers y le dí las nuevas pautas en los listen.
Sos un grande y te estoy muy agradecido por el tiempo que usaste ayudándome. Muchísimas gracias!!!!!-
Perfecto compañero, encantado de que te haya podido ayudar, a veces dándole un poco al coco es mejor, jeje.
Saludos.
-
-
Ok, si te tengo que ser sincero ...... me estoy rompiendo la cabeza con lo nada que se de javascript y no llego a entenderlo:
La idea es que ponga?:
var accidentes = [-
algo asi?
-
-
Cambie:
function setMarkers(map) {
var markerImage = new google.maps.MarkerImage('img/accidente.png',new google.maps.Size(30.5,30.5), null, null, new google.maps.Size(30.5,30.5) );
for (var i = 0; i < accidentes.length; i++) {
var accidente = accidentes[i];
var marker = new google.maps.Marker({
position: {lat: accidente[1], lng: accidente[2]},
map: map,
icon: markerImage,
//animation: google.maps.Animation.DROP,
title: accidente[0]
});}
Por:
function setMarkers(map) {
var markerImage = new google.maps.MarkerImage('img/delito.png', new google.maps.Size(30.5,30.5), null, null, new google.maps.Size(30.5,30.5));
var marcadores = [];
for (var i = 0; i < accidentes.length; i++) {
var accidente = accidentes[i];
var marker = new google.maps.Marker({
position: {lat: accidente[1], lng: accidente[2]},
map: map,
icon: markerImage,
title: accidente[0]
});
marcadores[i]= marker;}}
-
-
-
-
Se vé que me falta alguna función para recorrer cada uno de los datos y cambiarle el tamaño del marker, pero no se como hacerlo.
Muchas gracias.
<div align="center" id="map1"></div>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map1'), {
mapTypeControl: false,
streetViewControl: false,
zoom: 14,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
center: {lat:-34.828379,lng:-57.966273}
});
var accidentes = [
<?php
for ($i=0; $i<$CantidadDeLineas; $i++)
{echo "['ACCIDENTE: ".$observa[$i]."', ".$lat[$i].",".$lng[$i]."],";}?>
];
function setMarkers(map) {
var markerImage = new google.maps.MarkerImage(
'img/accidente.png',
new google.maps.Size(30.5,30.5), //size
null,//new google.maps.Point(0,0), // origin
null,//new google.maps.Point(285,325),
new google.maps.Size(30.5,30.5) //scale
);
for (var i = 0; i < accidentes.length; i++) {
var accidente = accidentes[i];
var marker = new google.maps.Marker({
position: {lat: accidente[1], lng: accidente[2]},
map: map,
icon: markerImage,
//animation: google.maps.Animation.DROP,
title: accidente[0]
});
}
google.maps.event.addListener(map, 'zoom_changed', function() {
zoom=map.getZoom();
if(zoom==21){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(1900, 1900)));}
if(zoom==20){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(950, 950)));}
if(zoom==19){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(550, 550)));}
if(zoom==18){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(242, 242)));}
if(zoom==17){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(120, 120)));}
if(zoom==16){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(61, 61)));}
if(zoom==15){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(30.5, 30.5)));}
if(zoom==14){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(15, 15)));}
if(zoom==13){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(9, 9)));}
if(zoom==12){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(4, 4)));}
if(zoom==11){marker.setIcon(new google.maps.MarkerImage('img/accidente13.png', null, null, null, new google.maps.Size(1, 1)));}
});
}
setMarkers(map);}
</script>