单张地图和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上的应用创建传单地图?

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

推荐答案

1. npm安装传单--save

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

1. npm install leaflet --save

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

a)

"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屋！