Javascript Meteor Js谷歌地图未渲染

我从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)
};

Template.groupMembers.rendered=function（）{
var映射；
var信息窗口；
var lat=Session.get（“lat”）；
var lon=Session.get（“lon”）；
控制台日志（横向、纵向）
函数初始化（）{
var location=new google.maps.LatLng（lat，lon）；
map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：位置，
缩放：15
});
var请求={
地点:地点,，
半径：500，
类型：['store']
};
infowindow=new google.maps.infowindow（）；
var service=newgoogle.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
}
函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i

这是一个简单的代码，获取前两个变量，然后渲染以lat和lon为中心的地图，并显示一些google places标记

注1:我在标题上加载googlemap api

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

我的问题是：当我单击#details时，事件运行良好（创建变量并重定向），重定向后，我可以看到控制台上显示的两个变量，但贴图从未呈现。如果因为变量消失而重新加载页面de-map呈现为空白，并且如果我更改代码中的某些内容以触发Meteor热重新加载，则贴图将呈现良好

---

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

问题的根源在于代码的最后一行：

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

有了这句话，你基本上是告诉你的应用程序在加载窗口时初始化地图。（duh，对吗？）这很好，当调用该语句时，您希望页面仍在加载。但在Meteor中，这种“windows已加载”事件在应用程序运行期间很少发生：在浏览器上“首次”加载应用程序页面时（或按F5），以及在重新加载热代码时

从那一刻起，你的应用程序将不再在你的窗口上触发任何加载事件（与多页应用程序相反，多页应用程序在你浏览它们时“重新加载”每个页面），当然，除非你在代码中以编程方式触发一个加载事件

这就是为什么您的地图只在热代码重新加载时显示。只有这样，您的侦听器才处于活动状态，并且窗口的加载事件才会被触发，从而触发您的

初始化

功能

在本例中，您希望在每次渲染模板时触发贴图。要实现这一点，您只需要在

呈现的
钩子中调用
初始化（）
函数。下面是一个基于您所拥有的（使用新的correct
onRendered
函数）的示例：

Template.groupMembers.onRendered（函数（）{
var映射；
var信息窗口；
var lat=Session.get（“lat”）；
var lon=Session.get（“lon”）；
控制台日志（横向、纵向）
函数初始化（）{
var location=new google.maps.LatLng（lat，lon）；
map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：位置，
缩放：15
});
var请求={
地点:地点,，
半径：500，
类型：['store']
};
infowindow=new google.maps.infowindow（）；
var service=newgoogle.maps.places.PlacesService（地图）；
服务.nearbySearch（请求、回调）；
}
函数回调（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i
尝试运行
initialize（）
而不是
google.maps.event.adddomstener（窗口'load'，initialize）
在渲染的
末尾，还有一个问题，我可以做些什么来保存或使这两个会话变量持久化（在重新加载后生存）？我个人使用这个包。使用它，您可以使用
session.setPersistent（）
而不是
session.set（）
设置持久会话值。（像往常一样使用
Session.get（）
检索它们）
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();
});