好的..
首先安装传单及其类型
npm install leaflet --save
npm install @types/leaflet --save
然后导入leaflet到你的组件或任何东西
import 'leaflet';
在 html 文件中添加一个 divid="map"
和预设的大小(最好通过 CSS 来实现)。
<div style="height: 180px" id="map"></div>
As styleUrls: []
在 Ionic2 中仍然有 bug,你还必须将传单样式添加到你的 html 文件中:
<link rel="stylesheet" href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/dist/leaflet.css" />
做好准备后,您可以开始传单教程 http://leafletjs.com/examples/quick-start/像这样:
ngOnInit(): void {
var map = L.map('map')
.setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets-basic/{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,
accessToken: 'xxx'
}).addTo(this.map);
}