Листовка с картой и IONIC 4 - PullRequest
Новая
       10

Листовка с картой и IONIC 4

0 голосов
/ 27 декабря 2018

Мне нужно создать карты на IONIC 4.
Но это невозможно, потому что у меня нет карт для IONIC 4.

Итак, возможно ли создать карту листовок на IONIC?4 для приложения на Android?

Ответы [ 2 ]

0 голосов
/ 15 июля 2019

Ответ от @ alex351 очень хороший.Но я прибыл в эту ветку из Google в поисках «сломанной карты листовки ionic4».

У меня не было листов, даже при импорте leaflet.css.

Это было потому, что я написал

<ion-content>
  <div id="map" style="height:400px; width: 100%;"></div>
</ion-content>

Кажется, что Ionic4 CSS конфликтует с листовкой.Вам нужно получить <div> за пределами <ion-content>.

Правильно просто: 

<div id="map" style="height:400px; width: 100%;"></div>

Надеюсь, эта помощь кому-то поможет

0 голосов
/ 31 декабря 2018
  1. npm установить буклет --save

  2. внутри angular.json или любого аналогичного документа конфигурации вашего приложения, добавьте следующее:

    a) 

    "assets": [
      ...,
      {
        "glob": "**/*",
        "input": "./node_modules/leaflet/dist/images",
        "output": "leaflet/"
      }
    ],

    b) 

    "styles": [
      ...,
      "./node_modules/leaflet/dist/leaflet.css"
    ],

  3. Внутри вашего component.html: 

    <div id="map" style="width:100%; height:100%;"></div>

  4. Внутри вашего component.ts: 

    import { Map, latLng, tileLayer, Layer, marker } from 'leaflet';

map: Map;

  5. , тогда вы можете вызвать такую ​​функцию при загрузке DOM: 

    loadmap() {
  setTimeout(() => {
    this.map = new Map('map').setView([this.lat, this.lng], 8);

    tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       // tslint:disable-next-line
      attribution: 'Map data &copy; <a 
    href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a 
    href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery 
    © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 18
    }).addTo(this.map);

  }, 50);
}

Обратите внимание, this.lat, это.lng - мои собственные значения.

Для чего-то еще есть документы: https://leafletjs.com/reference-versions.html

РЕДАКТИРОВАТЬ:

Вместо setTimeout, яиспользуйте Ionic's ionViewDidEnter ().SetTimeout был обходной путь, потому что ngAfterViewInit () Angular не работал для меня.

...