使用带有 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

然后将 leaflet 导入到您的组件或其他任何东西中

Then import leaflet to your Component or whatever with

import 'leaflet';

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