角度2＆リーフレットは、私はトラブルメモ帳では、角2で作業リーフレットマップを取得することだ

をマッピングし、私はシンプルなマップを作成するために、次のコードを書いている：角度2＆リーフレットは、私はトラブルメモ帳では、角2で作業リーフレットマップを取得することだ

<head> 
    <title>Experiment maps</title> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
</head> 
<body> 

<div id="map" style="height: 400px; background: #919191;"></div> 

<script> 
    var map = L.map('map').setView([54.5833300, -5.9333300], 13); 

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
     { 
     attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a 

href="http://mass.gov/mgis">MassGIS</a>', 
     maxZoom: 17, 
     minZoom: 9 
     }).addTo(map); 
</script> 

<h1>map</h1> 

</body>

私は同じスタイルシートをインポートしており、しかし、コンポーネントをロードすると、400pxのdivプレースホルダが赤い背景になり、マップはどのような形状やフォームにもなりません。リーフレットのCSSとスクリプトファイルを間違って参照していますか？

また、角度成分自体にstyleUrls: ['https://unpkg.com/[email protected]/dist/leaflet.css']を追加しようとしましたが、成功しませんでした。

また、あなたはREL =「スタイルシート」ととのindex.htmlで参照2つのスタイルシートを持つことができ、このように：

<link rel="stylesheet" href="styles.css"> 
<link rel="stylesheet" href="https://unpkg.com/[email protected] rc.3/dist/leaflet.css" />

私は私の元のstyle.cssを削除し、ちょうどleftletのバージョンを残して試してみました。

おかげ

出典

2016-09-15 taxer03

これは、コンポーネント内のリーフレットをこのように「定期的」な方法を使用することはできません。 npmを使用してプロジェクトにロードする必要があります（例：npm install leaflet）。ここで

はあなたの角度2のアプリケーションにこれを組み込む方法についてのすてきなチュートリアルです： https://www.npmjs.com/package/@asymmetrik/angular2-leaflet

出典

2017-04-25 13:29:04 Bunnynut

私はtypescriptです（角2）で開発し、私は公式javascriptのリーフレットのドキュメントを使用していました。

次の行を含むリーフレットディレクトリをインストールするだけです： npm install leaflet。

とあなたの輸入品で、インストール後に、このインポートを追加します。leaflet docsに示すように

import L from "leaflet";

最後に、あなたは同じリーフレットを使用することができます。（小さな変更はGoogleをご覧ください）

幸いです。

出典

2017-07-11 21:52:27

インポート* Lから 'リーフレット';新しい構文で –

角度2＆リーフレットは、私はトラブルメモ帳では、角2で作業リーフレットマップを取得することだ

答えて

関連する問題