Угловых 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>

Я импортирован же таблицу стилей и скрипт в файл index.html в угловом режиме, однако, когда я загружаю компонент, я просто получаю разделитель div 400px с красным фоном, без карты в любой форме или форме. Я неверно ссылаюсь на css и файлы сценария листка?

Я также попытался добавить styleUrls: ['https://unpkg.com/[email protected]/dist/leaflet.css'] в сам угловой компонент, без успеха.

Кроме того, вы можете иметь 2 таблицы стилей, указанный в index.html, с с отн = «таблицы стилей», как это:

<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

Я развиваю в машинописи (угловые 2), и я использовал OFFICAL JavaScript листовки Docs.

Вам просто нужно установить каталог листовок с этой строкой: npm install leaflet.

и добавить после установки этого импорта в вашем импорте:

import L from "leaflet";

, наконец, вы можете использовать листовку такие же, как показаны на leaflet docs. (с небольшими изменениями смотрите google)

Удачи.

источник

2017-07-11 21:52:27

импорт * как L из «листовки»; в новом синтаксисе –

Угловых 2 & листовка карты

ответ

Смежные вопросы