Question

这是我在js文件中的代码。

if (Meteor.isClient) {
  Template.map.rendered = function(){
  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';

  console.log("RENDERED CALLED");
  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);
};
}

这是我的HTML -

<head>

WhatsGoingOn

<body>
  {{> map}}
</body>

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

我在控制台中查看了页面 - 正在附加模板，并且有传单dom元素。但是，我看不到地图。

为什么？

Answer 1

您是否尝试将您的库置于客户端/兼容性之下？

Answer 2

正确设置地图height。例如：

<div id="map" class="map" style="height: 100px;"></div>

leaflet.js地图没有与流星一起显示。

2 个答案: