Javascript 在动态标记上使用事件
我在JavaScript中有一个init函数: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':
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的元数据)那么问题是什么呢。