Question

尝试使用他们的缔约方示例学习Meteor。我添加了leafletjs代码示例来测试地图，但我似乎无法让它工作。我甚至没有收到任何错误。以下是各方示例，它们在普通的html页面中工作。这是因为车把吗？如果有人知道任何问题会很棒。感谢。

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

Answer 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}}块，以及创建渲染一次的黑客攻击

Answer 2

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

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

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

无法让leafletjs地图与Meteor一起使用

2 个答案: