传单地图和 IONIC 4 [英] Leaflet Map and IONIC 4

问题描述

我需要在 IONIC 4 上创建地图.
但这是不可能的，因为我没有 IONIC 4 的地图.

I need to create maps on IONIC 4.
But it is not possible, because I don't have maps for IONIC 4.

那么，是否可以在 IONIC 4 上为 Android 上的应用创建 Leaflet Map?

So, is it possible to create a Leaflet Map on IONIC 4 for an App on Android?

推荐答案

1. npm install 传单 --save

2. 在 angular.json 或您应用的任何类似配置文档中，添加以下内容:

1. npm install leaflet --save

2. inside angular.json or any similar config doc of your app, add the following:

一)

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

b)

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

在你的 component.html 中:

Inside your component.html:

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

在你的 component.ts 中:

Inside your component.ts:

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

map: Map;

那么你可以在 DOM 加载的时候调用这样的函数:

then you can call a function like this when the DOM is loaded:

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、this.lng 是我自己的值.

Notice, this.lat, this.lng are my own values.

对于其他任何事情，有文档:https://leafletjs.com/reference-versions.html

For anything else, there are the docs: https://leafletjs.com/reference-versions.html

我使用 Ionic 的 ionViewDidEnter() 代替 setTimeout.SetTimeout 是一种解决方法，因为 Angular 的 ngAfterViewInit() 对我不起作用.

Instead of setTimeout, I use Ionic's ionViewDidEnter(). SetTimeout was a workaround, because Angular's ngAfterViewInit() was not working for me.

这篇关于传单地图和 IONIC 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！