Question

我在使用来自Meteor数据库的标记初始化我的谷歌地图时出现问题。我已经将console.log消息放在各处进行测试 - 它似乎非常不一致 - 有时标记被创建和加载 - 并且在其他时候它进入初始化函数，但它不会进入循环创建标记。我在路由器中有一个waitOn订阅，以确保在运行初始化函数之前数据已加载并且可用。

html模板：

<template name="mapGoogle">
    <div id="map-canvas" style="width:900px; height:420px;"></div>
</template>

客户js：

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.js -

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')];
    }
  });
});

似乎在页面的第一次渲染中 - 在地图上正确创建和设置了标记。但是，如果我刷新页面，有时会创建标记，有时则不会创建标记。

我还尝试在mapGoogle渲染的js代码上使用google.maps.event.addDomListener（窗口，＆＃39;加载＆＃39;，初始化）。但仍然存在同样的问题。

有什么建议吗？感谢。

Answer 1

@Saimeunt是正确的。

我需要使用Router.onBeforeAction（＆＃34; loading＆＃34;）为铁路由器添加默认加载挂钩。否则，不会真正应用waitOn订阅，并且在加载数据之前加载页面。

Meteor.js谷歌地图初始化

1 个答案: