Question

我在myGroup Template中有这个事件：

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

这是一个简单的代码，它采用前两个变量，然后渲染以lat和lon为中心的地图，并显示一些谷歌地方标记。

注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热重载，则地图将呈现良好。

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

Answer 1

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

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

使用此行，您基本上是在告诉您的应用在加载窗口时初始化地图。（对，对吗？）当你希望在调用该语句时仍然加载页面时，这很好。但是在Meteor中，这个＆＃34; windows已经加载了＃34;在您的应用运行时期间，事件发生的次数很少：第一次加载应用的页面时＃34;在您的浏览器上（或按F5），以及热代码重新加载。

从那一刻开始，您的应用将不再在您的窗口上触发任何更多加载事件（而不是多页应用程序，其中＆＃34;重新加载＆＃34;每个页面在您浏览它们时），除非当然，您可以通过编程方式在代码中触发一个。

这就是您的地图仅显示热码重新加载的原因。只有然后都是您的监听器激活和窗口的加载事件被触发，从而触发您的initialize功能。

在您的情况下，您想要的是每次渲染模板时触发地图。要实现这一点，您只需在initialize()挂钩中调用rendered函数即可。以下是基于您拥有的内容的示例（使用新的正确的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();
});

Meteor Js谷歌地图未呈现

1 个答案: