流星Js谷歌地图未渲染

Question

我有这个事件从myGroup模板:

'click #details': function(e){
    // Prevent default actions
    e.preventDefault();
    // Get groupid
    var groupId = e.target.name
        group = Groups.findOne(groupId)
        lat = group.destination.location.lat
        lon = group.destination.location.lon
    Session.set('lat', lat);
    Session.set('lon', lon);
    Router.go('/group/'+groupId);
}

这个事件，如你所见，创建了两个会话变量，然后重定向到另一个名为groupMap的模板。

在呈现groupMap时，我要运行以下代码:

Template.groupMembers.rendered = function(){
 var map;
 var infowindow;
 var lat = Session.get("lat");
 var lon = Session.get("lon");
 console.log(lat,lon)
 function initialize() {
var location = new google.maps.LatLng(lat, lon);
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: location,
    zoom: 15
  });
  var request = {
    location: location,
    radius: 500,
    types: ['store']
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}
 function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}
function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}
google.maps.event.addDomListener(window, 'load', initialize)
};

这是一个简单的代码，采用前面的两个变量，然后渲染地图居中的纬度和lon，并显示一些谷歌位置标记。

NOTE1:我在header

上加载googlemap api

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

我的问题是:当我点击#details事件工作良好(创建变量和重定向)，重定向后，我可以看到两个变量显示在控制台，但地图从未渲染。如果我重新加载页面，地图渲染为空白，因为变量消失了，如果我在代码中改变一些东西来触发流星热重新加载，地图将渲染得很好。

我能做些什么来解决这个问题?(我需要在第一次加载时渲染地图)

Answer 1

问题的根源就在代码的最后一行:

google.maps.event.addDomListener(window, 'load', initialize)

在这一行中，你基本上是告诉你的应用程序在加载窗口时初始化地图。(咄?)当您期望调用该语句时页面仍在加载时，这很好。但是在Meteor中，这种"windows is loaded"事件在你的应用运行时很少发生:当你在浏览器上"第一次"加载一个页面时(或按下F5)，以及在热代码重新加载时。

从那一刻起，你的应用程序将不再触发窗口上的任何加载事件(与多页面应用程序相反，当你浏览它们时"重新加载"每个页面)，当然，除非你在代码中通过编程触发一个。

这就是为什么你的地图只在热码重载时显示。只有然后是您的监听器活动和窗口的加载事件被触发，因此触发您的initialize函数。

在你的例子中，你想要的是在每次呈现模板时触发映射。要实现这一点，您只需要在rendered钩子中调用initialize()函数。下面是一个基于您所拥有的(使用新的正确的onRendered函数)的示例:

Template.groupMembers.onRendered(function(){
 var map;
 var infowindow;
 var lat = Session.get("lat");
 var lon = Session.get("lon");
 console.log(lat,lon)
 function initialize() {
var location = new google.maps.LatLng(lat, lon);
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: location,
    zoom: 15
  });
  var request = {
    location: location,
    radius: 500,
    types: ['store']
  };
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}
 function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}
function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}
initialize();
});