Lui*_*ira 1 dictionary leaflet ionic4
我需要在IONIC 4上创建地图。
但这是不可能的,因为我没有IONIC 4的地图。
因此,是否有可能在IONIC 4上为Android上的应用创建传单地图?
在angular.json或应用程序的任何类似配置文档中,添加以下内容:
一种)
"assets": [
...,
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images",
"output": "leaflet/"
}
],
Run Code Online (Sandbox Code Playgroud)
b)
"styles": [
...,
"./node_modules/leaflet/dist/leaflet.css"
],
Run Code Online (Sandbox Code Playgroud)在您的component.html中:
<div id="map" style="width:100%; height:100%;"></div>
Run Code Online (Sandbox Code Playgroud)在您的component.ts内部:
import { Map, latLng, tileLayer, Layer, marker } from 'leaflet';
map: Map;
Run Code Online (Sandbox Code Playgroud)那么您可以在加载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 © <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);
}
Run Code Online (Sandbox Code Playgroud)注意,this.lat,this.lng是我自己的值。
除此之外,还有以下文档:https : //leafletjs.com/reference-versions.html
编辑:
我使用Ionic的ionViewDidEnter()代替了setTimeout。SetTimeout是一种解决方法,因为Angular的ngAfterViewInit()对我不起作用。