Листовка Карта в Angular4 с ошибками

Question

Шаблон:

<div id="mapid" style="height: 500px"></div>

Я установил буклет и набрал текст для буклета. Когда появилась ошибка о том, что контейнер с картой не найден, я добавил его импорт.

контроллер:

    import { Component, OnInit, EventEmitter, Output } from 
    '@angular/core';
import * as L from 'leaflet';
import { Map } from 'leaflet';

@Component({
  selector: 'app-leafletmap',
  templateUrl: './leafletmap.component.html',
  styleUrls: ['./leafletmap.component.css']
})
export class LeafletmapComponent implements OnInit {
  mymap = L.map('mapid').setView([29.6516, -82.3248], 13);

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
   {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, 
    <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: '*****************************'
  }).addTo(mymap);

  popup = L.popup();
  marker: any;

  onMapClick(e) {
    if (marker != undefined)
      mymap.removeLayer(marker)
    marker = new L.Marker(e.latlng, { draggable: true });
    mymap.addLayer(marker);
    popup.setLatLng(e.latlng).setContent("You clicked the map at " + e.latlng.toString()).openOn(mymap);
  }
  mymap.on('zoomend', function() {
    console.log(mymap.getZoom());
  })
  mymap.on('click', onMapClick);

  constructor() { }

  ngOnInit() {
  }

}

Я не уверен, что это способ передачи маркеров доступа и инициализации переменных в машинописном тексте, так как я написал этот код в соответствии с руководством, в котором использовался обычный Javascript.

Answer 1

Я недавно работал с листовкой, поэтому выкладываю свой код, который полностью работает здесь. Пожалуйста, попробуйте сами.

Я использую следующий модуль npm: npm install @asymmetrik/ngx-leaflet --saveСмотрите: https://github.com/Asymmetrik/ngx-leaflet

component.ts

private map: L.Map;

options = {
        layers: [
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 15 })
        ],
        zoom: 4,
        center: L.latLng([39.878868, -100.357010])
    };

onMapReady(map: L.Map) {
    this.map = map;
}

component.html

<div leaflet
     [leafletOptions]="options"
     (leafletMapReady)="onMapReady($event)">
</div>

app.module.ts

imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        LeafletModule.forRoot() // Don't forget to include leaflet here.
    ]

Вы можете попробовать мой основной вариант, а затем, если он работает, вы можете добавить свои параметры и свой логин в onMapReady функция.

UPD: если вы хотите сослаться на что-то из листовки, например, MapOptions в конкретном компоненте, просто импортируйте листок таким образом. import * as L from 'leaflet'; затем используйте L.Map, L.MapOptions, так далее.

UPD2: Также важно установить типы npm install @types/leaflet

Answer 2

Я получил такое же сообщение об ошибке, как вы: Module '"leaflet"' has no exported member 'MapOptions'). Для меня это работало, чтобы удалить типы листовок (npm uninstall @types/leaflet)