我正嘗試使用Windity Api in ionic 2在離子2中使用windity API
所以我在引用以下鏈接。 [widity api] [1]
而且從我的ts文件中,我試圖將js文件附加到使用代碼的html中。
但我得到錯誤windytyInit沒有定義。
在離子2中可以使用這個API嗎? 我該怎麼做?
我正嘗試使用Windity Api in ionic 2在離子2中使用windity API
所以我在引用以下鏈接。 [widity api] [1]
而且從我的ts文件中,我試圖將js文件附加到使用代碼的html中。
但我得到錯誤windytyInit沒有定義。
在離子2中可以使用這個API嗎? 我該怎麼做?
地圖的動作非常令人滿意! :-D所以我決定讓它適用於離子。在離子中,我們可以添加<script>
標籤的唯一一點是src/index.html
。所以我們可以開始添加所鏈接教程中列出的所有內容。所有的
首先,添加leaflet.js
如在index.html
的<head>
最後一個元素:
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
然後,你必須用id windity
在index.html
的<body>
添加div
。我還將它包裝到一個容器div中,以便我們可以「移回」元素(稍後會介紹)。我們必須在此處添加它(而不是在我們其他模板中的某處),因爲我們無法控制有風的腳本何時需要它,並且我們的模板可能還不可用,重要的是,您在<ion-app>
元素之前添加元素,否則地圖被裝載在你的應用程序的頂部(我還添加了一個樣式屬性,以確保地圖是不可見的之前,我們希望它是可見):
<body>
<div id="container">
<div id="windyty" style="visibility: hidden"></div>
</div>
...
而且你需要從教程添加的最後一部分是初始化變量,主要功能和boot.js
依賴性:
...
<script type="text/javascript">
var windytyInit = {
key: 'PsL-At-XpsPTZexBwUkO7Mx5I',
lat: 50.4,
lon: 14.3,
zoom: 5,
}
function windytyMain(map) {
var popup = L.popup()
.setLatLng([50.4, 14.3])
.setContent("Hello World")
.openOn(map);
}
</script>
<script async defer src="https://api.windytv.com/v2.3/boot.js"></script>
</body>
然後,你需要做河畔Ë所有的腳本,CSS和圖像顯示的地圖被允許在你的內容安全策略(確保你做合併這個與你):
<meta
http-equiv="Content-Security-Policy"
content="
default-src gap://ready file://* * blob:;
img-src https://*.windytv.com https://*.windy.com 'self';
style-src 'self' https://*.windytv.com;
script-src 'self' https://cdnjs.cloudflare.com https://*.windytv.com https://*.windy.com https://www.google-analytics.com"
>
當您啓動您的應用程序現在的地圖加載,但低於您的離子應用。因此,在您實際想要顯示地圖的離子版網頁上,您需要將我們在index.html
中創建的標記「移動」到您網頁的模板中。這裏是你怎麼做:
你在你的模板要在地圖上放置一個id創建一個容器元素:
<div id="windycontainer"></div>
,並在您把下面的代碼到相應的打字稿類angulars ngAfterViewInit()
方法(你需要把它放在一個生命週期掛鉤,其中DOM已經可用,ionViewDidEnter()
不工作太爲例):
ngAfterViewInit() {
document
.getElementById('windycontainer')
.appendChild(document.getElementById('windyty'));
}
而在.scss
文件的頁面添加的弗洛用於設計包含地圖的元素(並使其可見)。你需要確保其包裹在你的頁面的選擇:
your-page {
#windyty {
height: 500px;
width: 100%;
position: relative;
visibility: visible !important;
}
}
現在繼承人的事情:如果我們現在移動到另一個頁面,當前頁面是由角破壞,我們的漂亮的地圖都將丟失。爲了解決這個問題,我們需要我們的元素移回頁面被核爆前的初始位置,ionViewWillLeave()
掛鉤是該完善的地方:
ionViewWillLeave() {
document
.getElementById('container')
.appendChild(document.getElementById('windyty'));
}
現在的地圖是安全的再次<ion-app>
,我們可以外移動它,無論我們需要它再次。
這是我最後的結果看起來像:
注:沒有爲確保周圍的標籤移動更有棱角的方式。一般來說,直接使用document.getElementById
直接訪問DOM並不是一個好主意,但它很好地闡述了這個概念。
不錯的教程/答案! :) – sebaferreras
謝謝@sebaferreras,欣賞! – David
偉大的工作...... <3 –