Angular 有角度的单张地图4投掷错误

模板：

<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() {
  }

}

import{Component，OnInit，EventEmitter，Output}from
'角/核'；
从“传单”中输入*作为L；
从“传单”导入{Map}；
@组成部分({
选择器：“应用程序地图”，
templateUrl:'./传单映射.component.html'，
样式URL:['./传单映射.component.css']
})
导出类组件实现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}'，
{
属性：'映射数据©；贡献者，
，图像（，
maxZoom:18，
id:“地图盒。街道”，
accessToken:“***********************************”
}).addTo（mymap）；
popup=L.popup（）；
标记：任何；
onMapClick（e）{
如果（标记！=未定义）
mymap.removeLayer（标记）
marker=新的L.marker（e.latlng，{draggable:true}）；
添加图层（标记）；
setLatLng（e.latlng）.setContent（“您单击了“+e.latlng.toString（））.openOn（mymap）上的地图）；
}
mymap.on（'zoomend'，function（）{
log（mymap.getZoom（））；
})
mymap.on（'click'，onmaclick）；
构造函数（）{}
恩戈尼尼特（）{
}
}

---

我不确定这是否是在typescript中传递访问令牌和初始化变量的方法，因为我在使用常规Javascript的教程之后编写了这段代码

我最近使用了传单，所以我在这里发布了完全可行的代码。请自己试一试

我使用下一个npm模块：

npm安装@asymmetrik/ngx传单——保存

见：

组件。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;
}

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

component.html

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

您可以尝试我的基本变体，如果它有效，您可以添加选项并登录到

onMapReady

函数

UPD：如果要引用传单中的某些内容，例如特定组件中的MapOptions，只需以这种方式导入传单即可<代码>从“传单”导入*为L然后使用

L.Map

，

L.Map选项

，等等

---

UPD2：安装types也是很重要的

npm install@types/mobile

我收到了与您相同的错误消息：

模块的“mobile”没有导出的成员“mappoptions”

）。对我来说，卸载传单类型（

npm uninstall@types/mobile

）

可能是因为多行字符串。如果它位于多行上，则需要将字符串添加到一起：

'line1'+'line2'+'line3'

node_modules/@asymmetrik/ngx-ployate/dist/ployate/core/ployate.directive.d.ts（2,37）：Module's-ployate'没有导出的成员'map-options'

这是我现在遇到的错误。请参阅我的编辑。您需要执行另一个npm安装

npm install@types/shallet

。几周前有一段时间，

@types/shallet

的0.7.x版本作为最新版本发布。这导致了问题，因为0.7.x与传单1.x不兼容，而这正是ngx传单构建的基础。