Блог

Главная - Вопросы по программированию - Как я могу использовать meteor-leaflet для интеграции leaflet и meteor?

Как я могу использовать meteor-leaflet для интеграции leaflet и meteor?

#javascript #meteor #leaflet

#javascript #meteor #листовка

Вопрос:

Я попытался выполнить инструкции здесь, и я не вижу карту при запуске 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:

Проблема в том, что вы не объявили свою переменную Leaflet map, как показано ниже (из документации meteor-leaflet):

 if (Meteor.isClient) {
    L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images/';
    var map = L.map('map');
  }

Перед добавлением слоев, что вы пытались сделать в следующей строке кода, у вас должен быть объект карты Leaflet (это не просто ваш map div!).:

 if (Meteor.isClient) {
    L.tileLayer.provider('Thunderforest.Outdoors').addTo(map);
  }

Я предлагаю вам прочитать это руководство для простой реализации meteor-leaflet.
Надеюсь, это поможет!

Комментарии:

1. Я добавил if (Meteor.isClient) { L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images/'; var map = L.map('map'); } к своему выше main.js скрипт и карта по-прежнему не отображаются