带有Ionic2打字本的传单的使用

Question

我是Ionic2和Angular2的新手，有类型记录，我想为iOS和Android构建一个移动应用程序。作为下一步，我想包括一张地图，并找到传单，以便于在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

然后将传单导入您的组件或其他

import 'leaflet';

在html文件中添加一个带有id="map"和预置大小的div (最好通过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" />

在做完这些准备之后，您可以像这样从leaflet tutorial开始：

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);

}