リーフレット地図エラーを投げ

Question

テンプレート。マップコンテナが見つからないというエラーが表示されたら、インポートしました。

コントローラ：

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を使用していたチュートリアル以下、このコードを書いたとしてtypescriptですでアクセストークンと初期化変数を渡す方法であるかどうかわからないです。

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を使用します）Module '"leaflet"' has no exported member 'MapOptions'：また、それは私があなたのような同じエラーメッセージが表示されました種類npm install @types/leaflet

Answer 2

をインストールすることが不可欠です。私のためには、リーフレットタイプをアンインストールするために働いた（npm uninstall @types/leaflet）

申し訳ありませんが、私は今までcomment-functionを使用できません。だから私は新しい答えを書いたのです。