Google Maps API V3 - добавить прослушиватель событий для всех маркеров? - PullRequest
Новая
       7

Google Maps API V3 - добавить прослушиватель событий для всех маркеров?

32 голосов
/ 07 июля 2011

Должен быть способ добавить слушателя ко ВСЕМ МАРКЕРАМ, в настоящее время я добавляю слушателя к каждому, используя цикл, который кажется действительно неправильным ...

Это неправильно: 

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

Ответы [ 11 ]

39 голосов
/ 03 апреля 2013

В обоих случаях Marker и MarkerWithLabel вы также можете использовать ключевое слово this для ссылки на объект, к которому присоединен обработчик события: 

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

это здесь относится к конкретному объекту маркера.

30 голосов
/ 07 июля 2011

Вам необходимо добавить слушателя к каждому маркеру, но вы можете сделать это легко, например, определив функцию, например 

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;  
}

и вызвав ее соответствующим образом: 

var m1 = createMarker(new google.maps.LatLng(...), "m1");
var m2 = createMarker(new google.maps.LatLng(...), "m2");

илипетля и т. д.

4 голосов
/ 12 июня 2014

Если вы используете GoogleMaps v3.16 или новее, вы можете добавить обработчик событий ко всему слою map.data. 

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
});

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

4 голосов
/ 13 октября 2011

Мне удалось сделать это с помощью FusionTablesLayer.Нужно немного поработать, чтобы все правильно настроить, но как только вы закончите, это будет очень быстро, даже с тысячами маркеров.

Вы в основном создаете публичную таблицу в Документах Google и запрашиваете ее со своей веб-страницы.Карта предварительно сгенерирована на серверах Googles, поэтому она так хорошо работает.

Полная демонстрационная страница: 

<!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>

Дополнительную информацию смотрите в этой статье, «Слишком много маркеров!» от Люка Маэ и Криса Бродфута из команды Google Geo APIs.

0 голосов
/ 23 января 2019

Что я сделал, так это то, что при добавлении нового marker на карту и перед его добавлением в массив markers = [] я просто добавляю к нему слушатель marker.addListener('click', () => { // Do Something here});

Полный код: 

// 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);

    }

ССЫЛКА я следовал!

Мне было действительно трудно найти конкретный ответ на мою нужду.Но этот работает сейчас и везде для меня!С уважением!:)

0 голосов
/ 31 июля 2017 
/* 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());              
    });
}
0 голосов
/ 02 июля 2017

Чтобы развернуть на Jiri, ответьте на purley для тех, кто ищет, кто также хочет добавить пользовательский ярлык и т. Д. В духе сообщения Jiri, в сокращенной версии: 

    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;  
}

Удалить предупреждение, просто чтобы показатьдействие и т. д. Как и в случае с информацией о Джири, вы можете добавить м2, м3 и т. д. Я думал, что это просто закончило.

0 голосов
/ 22 октября 2016

Это самый простой способ: 

google.maps.event.addListener(marker, 'click', function() {
var marker = this;
alert("Tite for this marker is:" + this.title);
});
0 голосов
/ 06 августа 2014

Вы можете сделать что-то вроде этого: 

   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);
        });
      }
    }
0 голосов
/ 30 октября 2013 
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 ...
  });
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...