在離子2中使用windity API

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

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

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

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

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

來源

2017-10-13 hilda_sonica_vish

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

來源

2017-10-13 16:12:34 David

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

謝謝@sebaferreras，欣賞！ – David

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

在離子2中使用windity API

回答

相關問題