Javascript Girl
  1. Javascript Girl
  3. Changer l'icône du marqueur Google Maps lorsque vous cliquez sur d'autres
Intereting Posts
D3.select méthode ne fonctionne pas En utilisant la méthode de tronquage () HTML5 FileWriter? Analyser XML avec l'espace de noms par défaut en utilisant xPath dans javascript Rendre les chemins et les images rampants à Raphael js Les membres d'objets JavaScript qui sont prototypés en tant que tableaux sont partagés par toutes les instances de classe L'exécution de JavaScript a dépassé le délai d'attente Comment dessiner le filigrane dans HTML5 Canvas avec valeur de rotation dynamique? Prenez le fichier de type d'entrée (HTML) vers JavaScript et envoyez un courriel à l'aide de PHPmailer Affectez le texte div à la variable puis affichez-le Comment empêcher l'utilisateur de coller du texte dans une zone de texte? Est-il possible d'utiliser JavaScript dans le modèle handlebars.js? Le panneau externe Jquery Mobile 1.4 ne s'ouvre pas après avoir navigué vers une autre page Rechargez une page HTML une seule fois en utilisant JavaScript Javascript, comment trier un tableau sur plusieurs colonnes? Javascript glisser / déposer – Illustrator style 'smart guides'

Changer l'icône du marqueur Google Maps lorsque vous cliquez sur d'autres

J'ai créé une page de Google Maps Multiple locations, en utilisant le champ Google Map de champs personnalisés avancés.

J'ai réussi à faire changer l'icône du marqueur lorsque vous cliquez dessus, mais je souhaite qu'il soit modifié en cliquant sur d'autres icônes.

Voici un exemple du code: 

for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: iconBase + 'Stock%20Index%20Up.png' }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0], locations[i][6]); infowindow.open(map, marker); marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); } })(marker, i));

Meilleur aspect du code de travail ici: http://jsfiddle.net/gargiguy/s8vgxp3g

Ce que Duncan a dit: Ce que vous voulez faire, c'est ajouter tous vos marqueurs à un tableau. Dans votre gestionnaire d'événements de clic, faites une boucle sur ce tableau, mettez à jour l'icône de chaque marqueur. Ensuite, définissez l'icône uniquement pour le marqueur qui a été cliqué. 

 google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(locations[i][0], locations[i][6]); infowindow.open(map, marker); for (var j = 0; j < markers.length; j++) { markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png"); } marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); };

Violon de travail

Extrait du code de fonctionnement: 

 var markers = []; var map; function initialize() { map = new google.maps.Map(document.getElementById('map'), { zoom: 12, // center: new google.maps.LatLng(-33.92, 151.25), center: new google.maps.LatLng(36.8857, -76.2599), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/'; var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: iconBase + 'Stock%20Index%20Up.png' }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0], locations[i][6]); infowindow.open(map, marker); for (var j = 0; j < markers.length; j++) { markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png"); } marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); }; })(marker, i)); markers.push(marker); } } google.maps.event.addDomListener(window, 'load', initialize); var locations = [ [ "New Mermaid", 36.9079, -76.199, 1, "Georgia Mason", "", "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.", "coming soon" ], [ "1950 Fish Dish", 36.87224, -76.29518, 2, "Terry Cox-Joseph", "Rowena's", "758 W. 22nd Street in front of Rowena's", "found" ], [ "A Rising Community", 36.95298, -76.25158, 3, "Steven F. Morris", "Judy Boone Realty", "Norfolk City Library - Pretlow Branch, 9640 Granby St.", "found" ], [ "A School Of Fish", 36.88909, -76.26055, 4, "Steven F. Morris", "Sandfiddler Pawn Shop", "5429 Tidewater Dr.", "found" ], [ "Aubrica the Mermaid (nee: Aubry Alexis)", 36.8618, -76.203, 5, "Myke Irving/ Georgia Mason", "USAVE Auto Rental", "Virginia Auto Rental on Virginia Beach Blvd", "found" ] ]; 
 <script src="http://maps.google.com/maps/api/js"></script> <div> <div id="map" style="width: 500px; height: 400px;"></div> </div>

Comme il semble que vous ne deviez changer l'icône précédente à l'original, je ne recommanderais pas de boucler tous les marqueurs. Dans une carte avec beaucoup de marqueurs, cela pourrait devenir assez lourd.

Au lieu de cela, je stockerais le marqueur actif dans une variable sur l'événement de clic, et je viens de le mettre à jour lorsqu'il change. 

 var marker; var activeMarker; var iconDefault = iconBase + 'Stock%20Index%20Up.png'; var iconSelected = 'https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png'; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: iconDefault }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0], locations[i][6]); infowindow.open(map, marker); // check to see if activeMarker is set // if so, set the icon back to the default activeMarker && activeMarker.setIcon(iconDefault); // set the icon for the clicked marker marker.setIcon(iconSelected); // update the value of activeMarker activeMarker = marker; } })(marker, i)); }