单张地图和IONIC 4

Lui*_*ira 1 dictionary leaflet ionic4

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

因此,是否有可能在IONIC 4上为Android上的应用创建传单地图?

ale*_*351 9

  1. npm install leaflet --save
  2. 在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)
  3. 在您的component.html中:

    <div id="map" style="width:100%; height:100%;"></div>
    
    Run Code Online (Sandbox Code Playgroud)
  4. 在您的component.ts内部:

    import { Map, latLng, tileLayer, Layer, marker } from 'leaflet';
    
    map: Map;
    
    Run Code Online (Sandbox Code Playgroud)
  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);
    }
    
    Run Code Online (Sandbox Code Playgroud)

注意,this.lat,this.lng是我自己的值。

除此之外,还有以下文档:https : //leafletjs.com/reference-versions.html

编辑:

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