使用带有Ionic2打字稿的传单

Question

我是带有打字稿的Ionic2和Angular2的新手,我想为iOS和Android构建一个移动应用程序.下一步我想要包含一张地图并找到Leaflet,以便在GoogleMaps和OSM之间轻松改变,......

所以,我的问题始于安装:有不同的包,如npm install leaflet或npm install leaflet-map或npm install ui-leaflet更多..

其次,我不知道如何包含这些包.如果有人可以在Ionic2中为我提供一个非常简单的基本应用程序,显示传单地图,那就太棒了.

Answer 1

好的..首先安装传单及其打字

npm install leaflet --save
npm install @types/leaflet --save

然后将传单导入您的Component或其他任何内容

import 'leaflet';

在html文件中添加一个div id="map"和一个预设的大小(最好通过css).

<div style="height: 180px" id="map"></div>

由于styleUrls: []在Ionic2中仍然存在问题,您还必须将传单样式添加到html文件中:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

准备好之后,您可以从这样的传单教程开始:

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 &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,
      accessToken: 'xxx'
    }).addTo(this.map);

}