javascript - Meteor 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);
}

如您所见，此事件创建两个 session 变量，然后重定向到另一个名为 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)
};

这是一个简单的代码，它采用前面的两个变量，然后渲染以纬度和经度为中心的 map ，并显示一些谷歌地点标记。

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

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

我的问题是:当我单击 #details 时，事件运行良好(创建变量并重定向)，重定向后我可以看到控制台上显示的两个变量，但 map 永远不会渲染。如果我重新加载 map 渲染页面为空白，因为变量消失，并且如果我更改代码中的某些内容以触发 Meteor 热重载，则 map 将渲染良好。

我可以做什么来解决这个问题？ (我需要在第一次加载时渲染 map )

Answer 1

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

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

通过这一行，您基本上是在告诉您的应用程序在加载窗口时初始化 map 。 (呃，对吧？)当您期望在调用该语句时页面仍在加载时，这很好。但在 Meteor 中，这种“Windows 已加载”事件在应用程序运行时发生的次数很少:在浏览器上“第一次”加载应用程序页面时(或按 F5)以及热代码重新加载时。

从那一刻起，您的应用程序将不再在窗口上触发任何加载事件(与多页面应用程序相反，多页面应用程序会在您导航时“重新加载”每个页面)，除非您以编程方式触发一个加载事件在您的代码中。

这就是为什么您的 map 仅在热代码重新加载时显示。只有然后您的监听器才处于事件状态并且窗口的加载事件被触发，从而触发您的初始化函数。

在您的情况下，您想要的是每次渲染模板时触发 map 。为此，您只需在 rendered Hook 中调用 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();
});