Question

嗨，我正在制作一个简单的应用程序，用流星显示传单地图。

这个简单的例子不起作用

testApp.html：

<head>
  <title>testApp</title>
</head>

<body>
  <h1>Hello World!</h1>
  <div id="map"></div>
</body>

testApp.js

if (Meteor.isClient) {
var map = L.map('map').setView([51.505, -0.09], 13);
  var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  var osmAttrib='Map data © OpenStreetMap contributors';
  var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});   
  map.setView(new L.LatLng(51.3, 0.7),9);
  map.addLayer(osm);

}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

它给了我Uncaught TypeError: Cannot read property '_leaflet' of null

如果我在控制台中编写相同的代码，地图会显示。

感谢您的帮助

Answer 1

您需要将地图呈现代码放在将在呈现模板时运行的回调中

Template.nameofyourtemplate.rendered = function() { //map code }

将地图div包裹起来，如下所示

<template name='nameofyourtemplate'>
 {{#constant}}
   <div id='map'></>
 {{/constant}}
<template>

从HTML正文中分离地图模板

<body>
 <{{> nameofyourtemplate>}}
</body>

Answer 2

您需要将地图div包装成如下

{{#constant}}
  <div id="map"></div>
{{/constant}}

使用传单与流星

2 个答案: