Javascript Meteor.js谷歌地图初始化
我在初始化我的谷歌地图时遇到了一些问题,这些问题来自Meteor数据库中的标记。 我将console.log消息放在了所有地方来测试它-看起来非常不一致-有时创建和加载标记-有时它进入初始化函数,但它不会进入循环来创建标记。我在路由器中有一个waitOn订阅,以确保在运行initialize函数之前数据已加载且可用 html模板:Javascript Meteor.js谷歌地图初始化,javascript,google-maps,meteor,initialization,Javascript,Google Maps,Meteor,Initialization,我在初始化我的谷歌地图时遇到了一些问题,这些问题来自Meteor数据库中的标记。 我将console.log消息放在了所有地方来测试它-看起来非常不一致-有时创建和加载标记-有时它进入初始化函数,但它不会进入循环来创建标记。我在路由器中有一个waitOn订阅,以确保在运行initialize函数之前数据已加载且可用 html模板: <template name="mapGoogle"> <div id="map-canvas" style="width:900px; h
<template name="mapGoogle">
<div id="map-canvas" style="width:900px; height:420px;"></div>
</template>
似乎在页面的第一次呈现时,标记已在地图上正确创建并设置动画。但是,如果刷新页面,有时会创建标记,有时则不会
我还尝试在mapGoogle呈现的js代码上使用google.maps.event.addDomListener(窗口“加载”,初始化)。但同样的问题仍然存在
有什么建议吗?谢谢。@saimemount是正确的
我需要使用router.onBeforeAction(“加载”)为iron路由器添加默认加载挂钩。
否则,waitOn订阅将不会真正应用,页面将在数据加载之前加载。其他信息-查看控制台日志。在页面刷新时,代码将始终进入initialize()函数,但有时它不会进入标记创建循环。您如何加载google maps API?您是否正在使用
Router.onBeforeAction(“加载”)设置默认的loading
hook代码>?查看“它有时不会进入标记创建循环”。=>调用Template.rendered时,看起来订阅尚未就绪。@saimeunt。商定报表2。当我输出航空公司/鲨鱼的计数时,当计数返回0时,它不会加载。但是现在我很困惑——我以为路由器中的waitOn函数可以解决这个问题。i、 在订阅准备好并首先完成之前,页面根本不应该加载?哦,我明白你的意思了。我需要设置iron router自己的默认加载钩子,让它工作并等待数据订阅,而不是我自己的会话变量?
Template.mapGoogle.rendered = function(){
Session.set('loading', true');
initialize();
}
var initialize = function(){
console.log('inside initialize');
var latitude = 22.2924391;
var longitude = 94.1967784;
var map; var icon; var lat; var lng; var icon;
var location = new google.maps.LatLng(latitude, longitude);
var markers = [];
var styles = [
{
stylers: [
{ hue: '#3cff00' },
{ visibility: 'simplified' },
{ gamma: 0.5 },
{ weight: 0.5 }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'water',
stylers: [
{ color: '#83bbdd' }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
// Create a map object, and include the MapTypeId to add
// to the map type control.
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(latitude, longitude),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'map_style']
}
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var sharkFin;
Sharks.find().forEach(function(shark){
console.log('inside shark for loop)
sharkFin = '/images/fins/shark_fin.png';
latShark = shark.latitude;
lngShark = shark.longitude;
marker = new google.maps.Marker({
position: new google.maps.LatLng(latShark, lngShark),
map: map,
animation: google.maps.Animation.DROP,
icon: sharkFin,
});
})
Airlines.find().forEach(function(airline){
console.log('inside airline for loop');
icon = airline.iconAir;
lat = airline.latitude;
lng = airline.longitude;
title = airline.title;
content = airline.content;
if(airline.webLink){webLink = airline.webLink}else{webLink=""};
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
animation: google.maps.Animation.DROP,
icon: icon,
title: title,
content: content,
webLink: webLink
});
var listener3 = google.maps.event.addListener(marker, 'mouseover', function(marker) {
console.log('inside marker listener');
return function(){
$('#content').find('div').remove();
if(webLink==""){
$('#content').append('<div><h1>'+ marker.title+'</h1><br>'+ marker.content+'<div>');
}else{
$('#content').append('<div><h1>'+ marker.title+'</h1><br>'+ marker.content+"<br><br>More information can be found on the airline's website <a href="+marker.webLink+'>here</a>.<div>');
}
}
}(marker)); //use closure for access to variables.
});
console.log('session variable set to false');
Session.set('loading',false);
Router.map(function() {
this.route('mainPage', {path:'/',
onBeforeAction: function(){
console.log('inside router session to true');
Session.set('loading',true);
},
waitOn: function(){
return [Meteor.subscribe('airlines'),
Meteor.subscribe('sharks')];
}
});
});