在动态标记上使用事件

时间:2014-12-16 09:53:50

标签: javascript google-maps-api-3 meteor google-maps-markers marker

我在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],但在循环中不允许使用函数。

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

我像这样渲染地图:

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

这是图片:

map

黄色标记是动态创建的。

解决方案: 只需添加一个额外的参数,所以每个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);
      }});
  }

1 个答案:

答案 0 :(得分: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();});
}