我是带有打字稿的Ionic2和Angular2的新手,我想为iOS和
Android构建一个移动应用程序.下一步我想要包含一张地图并找到Leaflet,以便在GoogleMaps和OSM之间轻松改变,……
所以,我的问题始于安装:有不同的软件包,如npm install leaflet或npm install leaflet-map或npm install ui-leaflet等等.
其次,我不知道如何包含这些包.如果有人可以在Ionic2中为我提供一个非常简单的基本应用程序,显示传单地图,那就太棒了.
好..
首先安装传单及其打字
原文链接:https://www.f2er.com/angularjs/142483.html首先安装传单及其打字
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 © <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); }