gestionnaire de marqueurs google map

Question

J'ai des problèmes d'affichage de 2 marqueurs différents en fonction du niveau de zoom. Par exemple, si le niveau de zoom est inférieur à 10, afficher l'icône a, et si le niveau de zoom est supérieur à 10, afficher l'icône 2. J'ai regardé le gestionnaire de marqueurs mais j'ai perdu un peu mon chemin. Voici mon code:

var url = "json.api"; 

function initialize() { 

    var myLatlng = new google.maps.LatLng(0, 0); 
    var myOptions = { 
     maxZoom: 16, 
     zoomControl: true, 
     disableDefaultUI: true, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    downloadUrl(url, function(data) { 

     var j = eval('(' + response + ')'); 
     var jlength = j.data.hotels.length; 

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

     for(i=0; i < jlength; i++) { 

      var x = parseFloat(j.data.hotels[i].lat); 
      var y = parseFloat(j.data.hotels[i].lon); 
      var z = new google.maps.LatLng(x,y); 
      var title = j.data.hotels[i].title; 
      var hotel_id = j.data.hotels[i].id; 
      var address = j.data.hotels[i].address; 
      var star = j.data.hotels[i].star; 
      var thumbnail = j.data.hotels[i].thumbnail; 

      var contentstring = 'some html'; 

      var marker = createMarker(); 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentstring 
      }); 

      bounds.extend(z); 

      map.fitBounds(bounds); 

      //NOT SURE IF THESE ARE NEEDED 
      // zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) { 
      // google.maps.event.removeListener(zoomChangeBoundsListener); 
      // }); 
      // google.maps.event.addListener(map, 'zoom_changed', function() { 
      // }); 
     }; 

     if (map.getZoom() == 21) {map.setZoom(16);} 

     if (map.getZoom() < 12) {map.setZoom(map.getZoom()+1);} 

     //alert(map.getZoom()) 

     function createMarker(){ 

      var marker = new google.maps.Marker({ 
       position: z, 
       map: map, 
       title: title, 
       html: contentstring, 
       icon: 'icona.png' 
      }); 

      google.maps.event.addListener(marker,'click',function(){ 
       infowindow.setContent(this.html); 
       infowindow.open(map,marker); 
      }); 
     }; 
    }); 
}; 

que vous voyez que j'ai un fichier JSON boucle qui i sur pour obtenir les lat et lng (et autres bits), puis créer un marqueur qui affiche tout dans mon fichier JSON avec une info fenêtre etc .... Puis-je créer une seconde fonction de marqueur, c.-à-d. createMarker2 et certains comment appeler si le zoom est plus de 10? ... toute aide serait appréciée. Ive a regardé quelques exemples en ligne, mais ont été confus. Merci d'avance.

Answer 1

Vous avez une section commentée qui est critique. Vous devez écouter l'événement zoom_changed. Vérifier la map.getZoom() n'effectuera rien à moins que ce soit dans ce gestionnaire d'événements.

google.maps.event.addListener(map, 'zoom_changed', function() { 
    // your zoom logic goes here 
    var zoom = map.getZoom(); 
    if (zoom < 10) { 
     // do something 
    } else { 
     // do something else 
    } 
}); 

Je vais laisser le reste de l'exercice pour vous - mais probablement vous aurez besoin d'ajouter chaque marqueur à un tableau de marqueurs et itérer ces marqueurs pour tourner conditionnellement puis on/off. Un conseil pour vous: vous pouvez ajouter des propriétés supplémentaires à l'objet marqueur à inspecter lorsque vous effectuez une boucle. Par exemple, vous pouvez ajouter un marker.LessThan10 = true; à l'objet marqueur. Ensuite, lorsque vous faites une boucle, vous pouvez rechercher cette propriété ci-dessus et appeler marker.setVisible(); le cas échéant.

Answer 2

Suggère que vous exécutiez votre code à travers http://www.jslint.com/ - il y a plusieurs erreurs de syntaxe (la plupart du temps ; qui n'ont pas besoin d'être là).

D'où vient response? C'est le seul endroit dans le code qui y fait référence:

var j = eval('(' + response + ')'); 

ne nichent pas la fonction createMarker dans la fonction d'initialisation. Rendez-le indépendant et transmettez les données dont vous avez besoin pour créer le marqueur et son infowindow à cette fonction en tant que paramètres.