使用Meteorjs和dburles谷歌地图包为Meteor。
目标: 是将标记映射到画布上,然后单击以显示infoWindows。我有一个问题是触发谷歌地图事件,以便窗口显示。
我的代码:
Template.myMap.helpers({
mapOptions: function() {
var locations = [
['Kroger', 34.069201, -84.231052, 5],
['Fresh Produce', 34.069802, -84.234164, 4],
['Starbucks', 34.069003, -84.236323, 3],
['Mall of Georgia', 34.069204, -84.232016, 2],
['Avalanche', 34.069705, -84.238207, 1]
]
// Make sure the maps API has loaded
if (GoogleMaps.loaded()) {
// We can use the `ready` callback to interact with the map API once the map is ready.
GoogleMaps.ready('myMap', function(map) {
var infowindow = new google.maps.InfoWindow(),
marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map.instance
});
google.maps.event.addListener(marker, 'click', function() {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
});
}
});
return {
center: new google.maps.LatLng(34.069705, -84.238),
zoom: 16
};
}
}
});
答案 0 :(得分:0)
您从事件处理程序返回一个函数,而不仅仅是处理事件,原因不明确。试试这个:
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
});
<强>更新强>
另一个问题是您尝试将其添加到GoogleMaps地图对象,而不是实例本身。它应该是:
infowindow.open(map.instance, marker);
此外,我还没有运行您的代码,但我认为您的结构方式会遇到问题,因为i
的价值不会当处理程序实际被触发时(因为循环将随后继续),可以按预期进行操作。考虑使用forEach
代替(通过下划线),以便每个处理程序都在自己的闭包中声明。
_.forEach(locations, function(location) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(location[1], location[2]),
map: map.instance
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(location[0]);
console.log(map, marker, infowindow);
infowindow.open(map.instance, marker);
});
});