javascript - 在动态标记上使用事件

Question

我在 JavaScript 中有这个 init 函数:

inicia2 = function(){
console.log("google maps init")

     //Variables declaration
        var lat,long,
        cordenadasClientes = Clientes.find({}, {fields:{'metadata.latCliente':           1,'metadata.longCliente':                       1,'metadata.nombreCliente':1}}).fetch();

    //Getting Geolocation
       lat = Session.get('lat');
       long = Session.get('lon');

    //Map Options
       var mapOptions = {
      center: new google.maps.LatLng(lat,long),
      zoom: 15,
      disableDefaultUI: true,
      styles:[{"stylers":[{"hue":"#ff1a00"},{"invert_lightness":true},{"saturation":-100},{"lightness":33},{"gamma":0.5}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#2D333C"}]}],
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

   //initialize Map
        var map = new google.maps.Map(document.getElementById("mapa_general"),
           mapOptions);

   //Geolocation Marker
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,long),
            map: map,
           title: 'Segun nosotros tu te encuentras Aqui!',
           animation: google.maps.Animation.DROP,
        i  con:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
      });

   //Dinamyc markers and info Window
      var texto = "Dale pa ",infowindow,marker2,markers = [];
       for(var i=0;i<cordenadasClientes.length;i++){
          var latitudCliente = cordenadasClientes[i].metadata.latCliente;
          var longitudCliente = cordenadasClientes[i].metadata.longCliente;
          var nombreCliente = cordenadasClientes[i].metadata.nombreCliente;

    //dinamic marker
        marker2 = new google.maps.Marker({
          position: new google.maps.LatLng(latitudCliente ,longitudCliente),
          map: map,
          title: nombreCliente,
         icon :'http://maps.google.com/mapfiles/marker_yellow.png',
     });

    //dinamic infoWindow
        infowindow = new google.maps.InfoWindow({
          content: texto + nombreCliente
     });

   //populatin markers array
     markers.push(marker2);  
     } //closing for
// Seems like this is the problem
          google.maps.event.addListener(markers, 'click', function() {  
      infowindow.open(map,markers);
    });
 }

我需要 google.maps.event.addListener 内的 markers[i]，但循环内不允许使用函数。

map 工作正常，它正在创建所有标记(地理标记和客户端标记)。

我正在像这样渲染 map :

Template.mapaGeneral.rendered = function(){ 
     inicia2();
}

这是图片:

黄色标记是动态创建的。

解决方案:只需添加一个额外的参数，因此每个 infoWindow 根据 mongo 集合上的每个客户端并使用一些 for 循环具有不同的内容

现在函数看起来像这样:

    function myInfoWindow(marker2,map,nombreCliente){
       var infoWindow = new google.maps.InfoWindow();

       google.maps.event.addListener(marker2, 'click', function() {
          for(var i=0;i<cordenadasClientes.length;i++){
          infoWindow.setContent("Dale Pa " + nombreCliente);
          infoWindow.open(map, marker2);
      }});
  }

Answer 1

尝试这样使用:

在markers.push(marker2);之后使用myInfoWindow(marker2,map);并将此函数添加到您的代码中:

function myInfoWindow(marker2,map){// this method will bind infowindow to your marker.
var infoWindow = new google.maps.InfoWindow();

google.maps.event.addListener(marker2, 'mouseover', function() {
    infoWindow.setContent("hi it's an infowindow");
    infoWindow.open(map, marker2);
    });
google.maps.event.addListener(marker2, 'mouseout', function() {infoWindow.close();});
}