如何使用meteor-leaflet集成leaflet和meteor？
如何使用meteor-leaflet集成leaflet和meteor？
提问于 2016-10-05 08:22:49
我试着查看了here的说明，但我在运行meteor时看不到地图。
以下是我采取的所有步骤：
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 然后导航到托管的url，并且看不到任何地图。
有没有人能成功地做到这一点，谁能提供帮助？谢谢。
回答 1
Stack Overflow用户
发布于 2016-10-05 09:21:08
问题是您还没有声明您的Leaflet映射变量，如下所示(来自meteor-leaflet documentation)：
if (Meteor.isClient) {
L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images/';
var map = L.map('map');
}您需要有一个Leaflet地图对象(它不仅仅是您的地图div!)在添加层之前，您曾尝试在下面的代码行中执行此操作：
if (Meteor.isClient) {
L.tileLayer.provider('Thunderforest.Outdoors').addTo(map);
}我建议你仔细阅读这篇tutorial，以获得meteor-leaflet的简单实现。希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39863649
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号