无法让 Leafletjs 地图与 Meteor 一起使用答案

【问题标题】：Can't get leafletjs maps to work with Meteor无法让 Leafletjs 地图与 Meteor 一起使用
【发布时间】：2014-03-15 11:54:53
【问题描述】：

尝试学习 Meteor，使用他们的派对示例。我添加了leafletjs 代码示例来测试地图，但我似乎无法让它工作。我什至没有收到任何错误。这是当事人的例子，它在一个普通的 html 页面中工作。这是因为Handlebars吗？如果有人知道任何问题，那就太好了。谢谢。

<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

  <title>Wishes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  {{> page}}

  <div id="wishmap" style="height:400px;"></div>

  <script>
    var mapa = L.map('wishmap').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.cloudmade.com/28cc49f16f1747ebae3100fb3d32f05a/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(mapa);

  </script>
</body>

【问题讨论】：

标签： meteor handlebars.js leaflet

【解决方案1】：

为您的地图制作一个单独的模板-

<template name="myWishmap">
  {{#constant}}
    <div id="wishmap" style="height:400px;"></div>
  {{/constant}}
</template>

然后跟踪该模板何时呈现 - 调用您的 javascript

Template.myWishmap.created = function(){
  Template.myWishmap.rendered = _.once(function(){
    var mapa = L.map('wishmap').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.cloudmade.com/28cc49f16f1747ebae3100fb3d32f05a/997/256/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
        maxZoom: 18
    }).addTo(mapa);
  });
}

然后像往常一样添加到您的body 标签：

{{> myWishmap}}

一旦新的 Meteor 模板引擎发布 (Meteor 1.0)，您将不再需要 {{#constant}} 块和 created-rendered-once hack

【讨论】：

谢谢@NathanM。但是，如果地图位于 create-rendered-once 块中，我该如何利用 Meteor 的反应性。这样地图就可以正常工作了，但是，地图的任何更新都不会传播到使用此地图的所有其他浏览器。
如果您的数据在集合中，则发布到客户端。您可以在同一个钩子中设置一个Collection.observe，它监视新项目added、changed 或removed。在回调中，您可以根据需要添加或删除标记。 - 我以这种方式构建了一个反应式画布和一个反应式日历。

【解决方案2】：

或者，也可以使用 - Atmosphere Meteor Package Control 来安装传单地图包。

https://atmosphere.meteor.com/package/leaflet

许多其他软件包已经在 Atmosphere 上开发并可用。

【讨论】：