Javascript Girl
  1. Javascript Girl
  3. Google Maps – Marqueurs multiples – 1 problème InfoWindow
Intereting Posts
Existe-t-il un moyen d'obtenir un titre intérieur uniquement de l'élément supérieur (et d'ignorer le texte intérieur de l'élément enfant)? Javascript: Hijack Copy? Détecter si une page possède une barre de défilement verticale? Le menu déroulant jQuery Mobile n'ouvre pas sur .popup ('open') Comment contourner les limitations de document.domain lors de l'ouverture de fichiers locaux? Insérez un script dans l'en-tête d'un iFrame, sans effacer le corps de l'iFrame Web speech api – synthèse de la parole .lang property not working Comment puis-je forcer un cfc Coldfusion à produire des données numériques sur JSON en tant que chaîne? Pouvez-vous obtenir un flux public de la page Facebook utilisant Graph API sans demander à un utilisateur de le permettre? Quelle est la différence entre var thing et function thing () en JavaScript? Comment convertir le javascript PHP encodé dans un tableau en version javascript? Html5 audio bind timeupdate avant l'élément existe Quel est le but de la promesse d'objet JQuery? Débogage de JSX à l'aide d'un navigateur / plugins Lire le fichier CSV avec Javascript dans un ensemble de paires de valeurs clés

Google Maps – Marqueurs multiples – 1 problème InfoWindow

Je ne peux pas obtenir mes marqueurs pour afficher différentes infowindows. Les marqueurs affichent toujours le contenu du dernier "ContentString".

J'ai lu quelques autres messages, mais aucun d'entre eux ne semble utile.

C'est le code: 

function setMarkers(branches, map) { var bounds = new google.maps.LatLngBounds(); var contentString = null; var infowindow = null; infowindow = new google.maps.InfoWindow(); for (var i = 0; i < branches.length; i++) { var marker = null; branch = branches[i]; var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]); contentString = '<p>' + branch[3] + '</p>'; var marker = new google.maps.Marker({ position: myLatlngMarker, map: map, title: branch[2] }); google.maps.event.addListener(marker, 'click', function () { infowindow.setContent(contentString); infowindow.open(map, this); }); bounds.extend(myLatlngMarker); } map.fitBounds(bounds); }

Quelqu'un peut-il voir ce que je fais mal?

Merci

Droite,

J'ai trouvé une solution. J'ai ajouté une propriété supplémentaire au marqueur appelé 'info', puis l'ai référencé à partir de l'événement 'addlistener' 'infowindow.setContent (this.info)'.

Voici le code mis à jour: 

 function setMarkers(branches, map) { var marker = null; var infowindow = new google.maps.InfoWindow(); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < branches.length; i++) { branch = branches[i]; var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]); var marker = new google.maps.Marker({ position: myLatlngMarker, map: map, title: branch[2], info: branch[3], icon: '<%=Icon%>' }); google.maps.event.addListener(marker, 'click', function () { infowindow.setContent(this.info); infowindow.open(map, this); }); bounds.extend(myLatlngMarker); } map.fitBounds(bounds); }

La raison pour laquelle il affiche toujours le dernier contentString est parce que c'est ce qu'il est configuré lorsque l'événement de clic déclenche. Il est écrasé à chaque itération de la boucle for.

Vous devez affecter le gestionnaire d'événements à l'aide d'une fermeture et passer le contexteString comme argument de la fonction, en renvoyant le véritable gestionnaire. 

 google.maps.event.addListener(marker, 'click', function(content) { return function(){ infowindow.setContent(content);//set the content infowindow.open(map,this); } }(contentString));

Avez-vous essayé de déclarer infowindow et contentString à l'intérieur de la for-loop, au lieu de sortir de la boucle? 

 function setMarkers(branches, map) { var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < branches.length; i++) { var infowindow = new google.maps.InfoWindow(); var contentString = ""; var marker = null; branch = branches[i]; var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]); contentString = '<p>' + branch[3] + '</p>'; var marker = new google.maps.Marker({ position: myLatlngMarker, map: map, title: branch[2] }); google.maps.event.addListener(marker, 'click', function () { infowindow.setContent(contentString); infowindow.open(map, this); }); bounds.extend(myLatlngMarker); } map.fitBounds(bounds); }

J'ai le même problème. J'ai pu obtenir le titre différemment en utilisant ce code: 

  setMarkers(map, airports); } function setMarkers(map, locations) { //you only need 1 infoWindow var infowindow = new google.maps.InfoWindow({ content: "holding" //content will be set later }); for (var i = 0; i < locations.length; i++) { var airport = locations[i]; var myLatLng = new google.maps.LatLng(airport[1], airport[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: airport[0], zIndex: airport[3], html: airport[4], }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(this.html);//set the content infowindow.open(map,this); }); } }