Блог

Главная - Вопросы по программированию - Использование листовки с машинописным текстом Ionic2

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

#angular #typescript #ionic-framework #leaflet #ionic2

#angular #машинопись #ионный фреймворк #листовка #ionic2

Вопрос:

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

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

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

Ответ №1:

Хорошо .. Сначала установите листовку и ее типизацию

 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" />

После этой подготовки вы можете начать с учебника по листовке, подобного этому:

 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 amp;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);

}

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

1. Не могли бы вы где-нибудь опубликовать свой код? Я обновляю до ionic1 с помощью своего приложения-листовки и пытаюсь разобраться в этом. Приветствия!

2. Все эти строки являются строками, связанными с ionic 2 . Все остальное должно быть равно вашему уже существующему коду. Например, добавление маркеров и так далее. Но не стесняйтесь спрашивать.

3. Запустил его. Спасибо. Однако у меня проблема с загрузкой фрагментов карты. Они редко появляются с пустыми пробелами, и обработка карты, такая как масштабирование, не помогает. Гладкая работа была возможна с помощью https://github.com/tsubik/ionic2-geofence кода, но, начиная с пустого шаблона, он обеспечивает такой неуклюжий интерфейс. Есть идеи?

4. Правильно ли вы используете tileLayer ? Я добавил его в решение выше.

5. Leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(this.map);