Использование листовка с Ionic2 машинописи

Question

Я новичок в Ionic2 и Angular2 с машинописи и я хочу построить мобильное приложение для Android и прошивкой. В качестве следующего шага я хочу включить карту и нашел листовки, легко переключаться между GoogleMaps и OSM, ...

Итак, мои проблемы начались с установкой: Существует различные пакеты, такие как npm install leaflet или npm install leaflet-map или npm install ui-leaflet и еще много.

Во-вторых, я не знаю, как включить эти пакеты. Было бы здорово, если бы кто-то мог предоставить мне действительно простое базовое приложение в Ionic2, показывающее карту буклетов.

Answer 1

Ok .. Сначала установите листовка и его типизации

npm install leaflet --save 
npm install @types/leaflet --save 

Затем импортировать листовку к вашему компоненту или что-то с

import 'leaflet'; 

В HTML-файл добавить DIV с id="map" и заданный размер (лучше сделать это через css).

<div style="height: 180px" id="map"></div> 

Как styleUrls: [] все еще глючит в Ionic2, вы также должны добавить стили листовку в свой HTML-файл:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" /> 

После этого приготовления вы можете начать с leaflet tutorial как это:

ngOnInit(): void { 
    var map = L.map('map') 
     .setView([51.505, -0.09], 13); 

    L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token={accessToken}', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
     maxZoom: 18, 
     accessToken: 'xxx' 
    }).addTo(this.map); 

}