角度 – 使用Ionic2打字稿的传单

发布时间：2020-12-17 07:35:32 所属栏目：安全来源：网络整理

导读：我是带有打字稿的Ionic2和Angular2的新手,我想为iOS和 Android构建一个移动应用程序.下一步我想要包含一张地图并找到Leaflet,以便在GoogleMaps和OSM之间轻松改变,…… 所以,我的问题始于安装：有不同的软件包,如npm install leaflet或npm install leaflet-ma

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

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

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

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

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

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

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

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!