Angular4中的传单地图抛出错误
Leaflet Map in Angular4 throwing errors
模板:
<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 © <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 的教程编写此代码的。
我最近使用过 leaflet ,所以我 post 我的代码在这里完全可用。请自行尝试。
我使用下一个 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,只需通过这种方式导入leaflet即可。 import * as L from 'leaflet';
然后使用 L.Map
、 L.MapOptions
等
UPD2:安装类型也很重要npm install @types/leaflet
我收到了与您相同的错误消息:Module '"leaflet"' has no exported member 'MapOptions'
)。对我来说,它可以卸载传单类型 (npm uninstall @types/leaflet
)
模板:
<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 © <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 的教程编写此代码的。
我最近使用过 leaflet ,所以我 post 我的代码在这里完全可用。请自行尝试。
我使用下一个 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,只需通过这种方式导入leaflet即可。 import * as L from 'leaflet';
然后使用 L.Map
、 L.MapOptions
等
UPD2:安装类型也很重要npm install @types/leaflet
我收到了与您相同的错误消息:Module '"leaflet"' has no exported member 'MapOptions'
)。对我来说,它可以卸载传单类型 (npm uninstall @types/leaflet
)