Meteor模板加载

Meteor templates loading

本文关键字：加载 Meteor      更新时间：2023-09-26

我用Meteor构建了一个简单的应用程序。它基本上从数据库中获取位置并将它们显示给用户。这是通过网络服务完成的。在模板中，我有一个谷歌地图。它获取位置的坐标，然后将它们显示在地图上。基本的想法是可行的。然而，问题是，当谷歌地图加载时，我的Web服务会被调用。因此，当创建模板映射时（它是在用户选择选项卡/映射并创建映射模板时创建的——或者我错了吗？）。正因为如此，当我第一次打开主页时，网络服务不会被调用，我也不会得到数据。

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

感谢

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

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

meteor add reactive-var

或者你可以使用流星会话。我将以会话为例，它更容易。

你的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

相关文章：