使用带有Ionic2打字稿的传单 [英] Usage of Leaflet with Ionic2 typescript

问题描述

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

I'm new to Ionic2 and Angular2 with typescript and I want to build a mobile application for iOS and Android. As a next step I want to include a map and found Leaflet, to change easily between GoogleMaps and OSM, ...

所以，我的问题从安装开始：有不同的软件包，如 npm install leaflet 或 npm install leaflet-map 或 npm install ui-leaflet 等等..

So, my problems started with installing: There are different packages like npm install leaflet or npm install leaflet-map or npm install ui-leaflet and many more..

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

Second, I have no idea how to include those packages then. Would be great, if someone could provide me a really simple basic app in Ionic2 showing a leaflet-map.

推荐答案

确定..
首次安装传单及其类型

Ok.. First install leaflet and its typings

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

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

Then import leaflet to your Component or whatever with

import 'leaflet';

在html文件中添加一个带 id =map<的div / code>和预先设定的大小（最好通过css）。

In the html-file add a div with id="map" and a pre-set size (better do it via css).

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

作为 styleUrls：[] 仍然是马车在Ionic2中，您还必须将传单样式添加到您的html文件中：

As styleUrls: [] is still buggy in Ionic2, you also have to add the leaflet styles to your html-file:

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

准备完毕后，您可以从传单教程，如下所示：

After this preparing you can start with the leaflet tutorial like this:

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

}

这篇关于使用带有Ionic2打字稿的传单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！