Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/425.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在动态标记上使用事件_Javascript_Google Maps Api 3_Meteor_Google Maps Markers_Marker - Fatal编程技术网

Javascript 在动态标记上使用事件

Javascript 在动态标记上使用事件,javascript,google-maps-api-3,meteor,google-maps-markers,marker,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':

我在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);
    });
 }
这是图像:

黄色标记是动态创建的

解决方案: 只需添加一个额外的参数,这样每个infoWindow就可以根据mongo集合上的每个客户端使用不同的内容,并使用一些for循环

现在函数看起来像这样:

Template.mapaGeneral.rendered = function(){ 
     inicia2();
}
    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);
      }});
  }
函数myInfoWindow(marker2、map、NombReclient){
var infoWindow=new google.maps.infoWindow();
google.maps.event.addListener(marker2,'click',function(){
对于(var i=0;i请尝试使用以下方法:

Template.mapaGeneral.rendered = function(){ 
     inicia2();
}
    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);
      }});
  }
标记之后。按下(标记2);
使用
myInfoWindow(标记2,地图);
并将此函数添加到代码中:

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

兄弟,这是可行的,但就像我说的,我有一个标记数组,所以我需要创建不同的信息窗口,我想我需要在标记数组上有一些游标。使用该函数,在所有标记上创建相同的窗口。你必须向函数myInfoWindow添加一个参数(标记2,映射,内容)作为内容,并在setContent(content)中使用此内容;因此它将显示给定的内容。我所写的是给您一个想法。是的,我知道实际上这就是我的setContent的外观信息窗口。setContent(texto+nombreCliente);其中var texto=“some string”和var nombreCliente=metadata.nombreCliente(来自FSCollection的元数据)那么问题是什么呢。