流星模板加载

Question

我已经用 Meteor 构建了一个简单的应用程序。它基本上从数据库中获取位置并将它们显示给用户。这是通过网络服务完成的。在模板中，我有一个谷歌地图。它获取位置的坐标，然后将它们显示在地图上。基本思想有效。但是，问题是我的网络服务在谷歌地图加载时被调用。因此，当创建模板地图时（它是在用户选择选项卡 /map 并创建地图模板时创建的 - 还是我错了？）。正因为如此，当我首先打开我的主页时，没有调用 web 服务，我也没有得到数据。

这个问题是如何解决的？我想在用户打开应用程序时加载所有数据。我认为 onRendered 和 onCreated 不能解决这个问题。如果你知道答案，请写下来，如果很明显，请分享一个链接，我可以阅读它。

谢谢

Answer 1

要解决您的问题，您应该首先创建地图（不带标记），当您获得用户的地理定位后，您将能够在地图上绘制它。或者您可以在渲染地图之前等待用户位置。您所需要的只是一种反应性治疗。

你可以在 ReactiveVar 中存储一个变量——你只需要添加这个非常有趣的包：

meteor add reactive-var

或者你可以使用meteor Session。我将使用会话作为示例，它更容易。

你的template.js（我写的没有测试，如果你有任何问题，请评论这篇文章）

Template.map.onRendered(function() {
     // Create an undefined value for this template, 
     this.marker;
     var myLatLng = {lat: -25.363, lng: 131.044};

     // Render an empty map
     this.map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: myLatLng
     });
     // Each time a reactive variable like ReactiveVar or session is edited,
     // rerun this function
     this.autorun(function() {
        // this autorun will rerun each time Session.get("userPosition") is edited
        var userPosition = Session.get("userPosition");
        if (userPosition && this.marker === undefined) {
            this.marker = new google.maps.Marker({
               position: myLatLng,
               map: this.map, 
               title: 'Hello user!'
            });
         }
     });
});

来源谷歌地图API：https://developers.google.com/maps/documentation/javascript/examples/marker-simple