2017-10-13 81 views
0

我正嘗試使用Windity Api in ionic 2在離子2中使用windity API

所以我在引用以下鏈接。 [widity api] [1]

而且從我的ts文件中,我試圖將js文件附加到使用代碼的html中。

但我得到錯誤windytyInit沒有定義。

在離子2中可以使用這個API嗎? 我該怎麼做?

回答

1

地圖的動作非常令人滿意! :-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 windityindex.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並不是一個好主意,但它很好地闡述了這個概念。

+0

不錯的教程/答案! :) – sebaferreras

+1

謝謝@sebaferreras,欣賞! – David

+0

偉大的工作...... <3 –