如何使用流星传单整合传单和流星?
问题描述:
我试过按照说明here进行操作,当我运行流星时我没有看到地图。如何使用流星传单整合传单和流星?
这里是所有我采取的步骤:
meteor create map-project
cd map-project
meteor add bevanhunt:leaflet
然后我更改客户端/ 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>
和客户端/ main.css的到的内容:
#map {
min-height: 350px;
min-width: 100%;
}
,最后客户端/ 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
然后导航到托管的URL,没有地图待观察。
有没有人成功做过谁可以帮忙?谢谢。
答
的问题是,你还没有宣布你的单张地图变量,如下(从meteor-leaflet documentation):
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);
}
我建议你一个简单的实现流星单张读了这tutorial。 希望有所帮助!
我添加了'if(Meteor.isClient){I0.Icon.Default.imagePath ='packages/bevanhunt_leaflet/images /'; var map = L.map('map'); }'到我的上面的main.js脚本和地图仍然不显示 –