流星と流星を統合するために流星リーフレットを使用するにはどうすればいいですか？

hereの指示を試してみましたが、流星を走らせると地図が表示されません。ここで流星と流星を統合するために流星リーフレットを使用するにはどうすればいいですか？

は私が取るすべてのステップです：

<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の内容：

meteor create map-project 
cd map-project 
meteor add bevanhunt:leaflet

は、私は、クライアント/ main.htmlとの内容を変更します。

0：へのクライアント/ main.jsの

#map { 
    min-height: 350px; 
    min-width: 100%; 
    }

、最終的に内容

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に移動し、見すべきマップはありません。

これを成功させた人は誰ですか？ありがとう。

出典

2016-10-05 David J.

問題は、あなたが（meteor-leaflet documentationから）下記のように、あなたのリーフレットマップ変数を宣言していないことである。

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

あなたはリーフレットマップオブジェクトを持っている必要があります（それはちょうどあなたのマップのdiv要素ではありません！）次のコード行でやろうとした層を、追加する前に：

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

私はあなたが流星-リーフレットの単純な実装のために、このtutorial上で読むことをお勧め。希望に役立ちます！

出典

2016-10-05 01:21:07

私は 'if（Meteor.isClient）{ L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images /'を追加しました。 var map = L.map（ 'map'）; } '私の上のmain.jsスクリプトに表示され、マップはまだ表示されません –

流星と流星を統合するために流星リーフレットを使用するにはどうすればいいですか？

答えて

関連する問題