L'API Google Maps V3 - ajouter un écouteur d'événement pour tous les marqueurs?

Il doit y avoir un moyen d'ajouter un écouteur pour TOUS les MARQUEURS, actuellement, je suis en ajoutant un port d'écoute de chacun à l'aide d'une boucle qui se sent vraiment mal...

Cela se sent mal:

google.maps.event.addListener(unique_marker_id, 'click', function(){
    //do something with this marker...                   
});

InformationsquelleAutor Haroldo | 2011-07-07

google-maps google-maps-api-3

39

Dans les deux Marker et MarkerWithLabel cas, vous pourriez tout aussi bien utiliser le ce mot clé de renvoyer l'objet à laquelle le gestionnaire d'événements est joint:
```
google.maps.event.addListener(marker, 'click', function () {
   //do something with this marker ...
   this.setTitle('I am clicked');
});
```
ce ici se réfère précisément à l'objet de marqueur.
- ce est élégant!
- Je pense que l'utilisation de "ce" est le droit d'appel, surtout si vous oubliez de déclarer le "marqueur" dans la variable "var" comme je viens de le faire, rendant ainsi à l'échelle mondiale et de passer une heure à essayer de comprendre pourquoi chaque marqueur cliquez sur renvoie la même info...
- +1 pour les plus appropriés et simple de résolution de problème. Je pense que c'est la meilleure réponse.
- Cela évite de polluer l'espace de noms global avec m1, m2, etc. De façon plus élégante!
- Cela ne résout pas le problème d'avoir à ajouter de l'auditeur à chaque marqueur individuellement...
- Il n'est pas montrer quoi que ce soit sur le marqueur, cliquez sur. setTitle avec ce ne fonctionne pas du tout.
- OMG je souhaite que je pourrais upvote vous aime 100 fois. Génial solution! Merci beaucoup!
- cela n'a rien à voir avec la question
- Pourquoi tous les upvotes? Il est toujours l'application de l'événement pour chaque marqueur.
InformationsquelleAutor Glenn Mohammad
30

Vous devez ajouter l'écouteur à chaque marqueur, mais vous pouvez le faire facilement, par exemple par la définition d'une fonction comme
```
function createMarker(pos, t) {
    var marker = new google.maps.Marker({       
        position: pos, 
        map: m,  //google.maps.Map 
        title: t      
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
       alert("I am marker " + marker.title); 
    }); 
    return marker;  
}
```
et de l'appeler de façon appropriée:
```
var m1 = createMarker(new google.maps.LatLng(...), "m1");
var m2 = createMarker(new google.maps.LatLng(...), "m2");
```
ou dans une boucle, etc.
- yep, c'est ce que je fais. Semble comme une mauvaise pratique...
- +1 Cela m'a vraiment aidé, et en boucle au travers de cette fonction est parfait.
- +1 a Fonctionné pour moi. A été d'avoir un ahrd temps
- Belle solution simple
InformationsquelleAutor Jiri Kriz

J'ai réussi à le faire à l'aide de FusionTablesLayer. C'est un peu de travail à la mise en place correctement, mais une fois que vous avez terminé, il est ultra-rapide, même avec des milliers de marqueurs.

En gros, vous avez créer une table dans Google Docs et les interroger à partir de votre page web. La carte est pré-générés sur Googles les serveurs, c'est pourquoi il effectue si bien.

Une démo complète de la page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Google Maps Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta charset="UTF-8">
  <style type="text/css">
    html, body, #map_canvas
    {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() 
    {
      var denmark = new google.maps.LatLng(56.010666, 10.936890);

      map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: denmark,
        zoom: 7,
        mapTypeId: 'roadmap'
      });

      layer = new google.maps.FusionTablesLayer({
        query: {
          select: 'Coordinates',
          from: '1234567'
        }
      });
      layer.setMap(map);

      google.maps.event.addListener(layer, 'click', function (event) { 
        alert('Hello World!'); });

    }
  </script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

Consultez cet article pour plus d'info, "Trop De Marqueurs!" par Luc Mahé et Chris Broadfoot de l'Api Google Geo Équipe.

le lien est cassé maintenant

InformationsquelleAutor Jakob Gade

Si vous êtes à l'aide de GoogleMaps v3.16 ou plus tard, vous pouvez ajouter le gestionnaire d'événements pour l'ensemble de la map.data couche.

var map = new google.maps.Map(document.getElementById("map-canvas"), options);
map.data.loadGeoJson('http://yourserver.com/path/to/geojson.json');
map.data.addListener('click', function(e) {
    //this - instance of the layer object, in this case - map.data
    //e.feature - instance of the feature object that initiated the event
    //e.latLng - the position of the event
});

voir: https://developers.google.com/maps/documentation/javascript/examples/layer-data-event

C'est passé en v3.34.x, et probablement dans certaines versions entre alors et maintenant.

InformationsquelleAutor Boris Chervenkov

0

J'ai réussi à obtenir une réponse ici:
Google Maps et Leurs Marqueurs

et une démo ici:
http://jsfiddle.net/salman/bhSmf/

InformationsquelleAutor Barrie Reader

Cette façon la plus simple est: est-ce

google.maps.event.addListener(marker, 'click', function() {
var marker = this;
alert("Tite for this marker is:" + this.title);
});

Cette fonction n'existe pas dans l'API.

InformationsquelleAutor Sandor

Étendre sur Jiri répondre à purley pour ceux à la recherche de qui souhaite également ajouter une étiquette personnalisée etc. Dans l'esprit de Jiri post, en version courte:

    var m1 = createMarker({lat: -25.363, lng: 131.044}, "m1", "<div id=\"content\"><div id=\"siteNotice\"></div>  <h1 id=\"firstHeading\" class=\"firstHeading\">m1</h1> <div id=\"bodyContent\">Some info</div> </div>");

function createMarker(pos, t, d) {
    var marker = new google.maps.Marker({       
        position: pos, 
        map: map, 
        title: t      
    }); 
    google.maps.event.addListener(marker,"click", function() { 
        alert("I am marker " + marker.title); 
    new google.maps.InfoWindow({ content: d }).open(map, marker);

    }); 
    return marker;  
}

Supprimer l'alerte, juste là pour montrer l'action etc. comme avec Jiri info, vous pouvez ajouter m2, m3 etc. Je pensais que cela finit simplement les choses.

InformationsquelleAutor Pete - iCalculator

/* Note: I have a set of data, and it is named by the variable data.
 * The variable data is an array
 */

//Here I get the length of the data
var dataLength = data.length;

//Then I iterate through all my pieces of data here
//NOTICE THAT THE KEYWORD let IS SO IMPORTANT HERE
for(let markerIterator = 0; markerIterator < dataLength; markerIterator++) {
    /* This creates a new google maps marker based on my data's latitude and 
     * longitude
     */
    var marker = new google.maps.Marker({
        position: { lat: data[markerIterator].latitude, lng: 
        data[markerIterator].longitude },
        map: map
    });

    google.maps.event.addListener(marker, 'click', function () {
        /* This will spit out the unique markerIterator value for each marker when 
         * clicked. It is a unique value because I defined markerIterator with the 
         * keyword let!
         */
        console.log(markerIterator); 

        //Use the keyword this to refer to each unique marker, for example:
        map.setCenter(this.getPosition());              
    });
}

,Ajouter une description à votre réponse.

InformationsquelleAutor Brandon Long

Ce que j'ai Fait est, lors de l'ajout de nouvelles marker sur la carte et avant de le pousser dans markers = [] tableau, je viens d'ajouter un écouteur à marker.addListener('click', () => { //Do Something here});

Code Complet:

//Adds a marker to the map and push to the array.
    function addMarker(location) {
        var marker = new google.maps.Marker({
            position: location,
            icon: {
                url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
            },
            animation: google.maps.Animation.DROP,
            map: map
        });
        marker.addListener("click",
            () => {
                console.log("Marker Click Event Fired!");
            });
        markers.push(marker);

    }

LIEN j'ai suivi!

C'était vraiment dur pour moi de trouver une réponse à mon besoin. Mais celui-ci est présent partout et pour moi!
Ce qui concerne les! 🙂

InformationsquelleAutor Arslan Ameer

-1

var map;
function initialize_map(locations) {
  var options = {
    zoom: 8,
    center: new google.maps.LatLng(59.933688,30.331879),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"), options);
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][lat], locations[i][lng]),
      map: map,
      title: locations[i][title]
    });
    set_event(marker);
    bounds.extend(marker.position);
  }
  map.fitBounds(bounds);
}
function set_event(marker) {
  google.maps.event.addListener(marker, 'click', function() {
    //do something with this marker ...
  });
}

C'est encore l'ajout de l'écouteur à chaque marqueur individuellement

InformationsquelleAutor test_answer

-1

Vous pouvez faire quelque chose comme ceci:

   function setMarkers(map, locations) {
      var image = ['circle_orange.png','circle_blue .png'];
      for (var i = 0; i < locations.length; i++) {
        var stations = locations[i];
        var myLatLng = new google.maps.LatLng(stations[1], stations[2]);
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: image[stations[3]],
          title: stations[0],
          zIndex: stations[3],
          optimized: false
        });
        var infowindow = new google.maps.InfoWindow({
            content: "No data available"
        });
        google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.setContent("We can include any station information, for example: Lat/Long: "+ stations[1]+" , "+stations[2]);
        infowindow.open(map, this);
        });
      }
    }

InformationsquelleAutor Rafa

Vous devez vous connecter pour publier un commentaire.