我尝试查看说明 here当我运行 meteor 时我没有看到 map 。
以下是我采取的所有步骤:
meteor create map-project
cd map-project
meteor add bevanhunt:leaflet
然后我将 client/main.html 的内容更改为:
<head>
<title>map-project</title>
</head>
<body>
<div id="map"></div>
<h1>Welcome to Meteor!</h1>
{{> hello}}
{{> info}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
<template name="info">
<h2>Learn Meteor!</h2>
<ul>
<li><a href="https://www.meteor.com/try" target="_blank">Do the Tutorial</a></li>
<li><a href="http://guide.meteor.com" target="_blank">Follow the Guide</a></li>
<li><a href="https://docs.meteor.com" target="_blank">Read the Docs</a></li>
<li><a href="https://forums.meteor.com" target="_blank">Discussions</a></li>
</ul>
</template>
以及 client/main.css 的内容:
#map {
min-height: 350px;
min-width: 100%;
}
最后将 client/main.js 的内容写入:
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
if (Meteor.isClient) {
L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images/';
var map = L.map('map');
}
if (Meteor.isClient) {
L.tileLayer.provider('Thunderforest.Outdoors').addTo(map);
}
然后我这样做:
meteor npm install
meteor
然后导航到托管网址，没有看到任何 map 。
有人成功完成此操作并可以提供帮助吗？谢谢。
最佳答案
问题是您尚未声明 Leaflet 映射变量，如下所示(来自 meteor-leaflet documentation ):
if (Meteor.isClient) {
L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images/';
var map = L.map('map');
}
在添加图层之前，您需要有一个 Leaflet map 对象(它不仅仅是您的 map div!)，您尝试在以下代码行中执行此操作:
if (Meteor.isClient) {
L.tileLayer.provider('Thunderforest.Outdoors').addTo(map);
}
我建议您阅读此内容 tutorial一个 meteor 传单的简单实现。 希望有帮助!
关于javascript - 如何使用meteor-leaflet来整合leaflet和meteor？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39863649/