Utilisez API windity dans ionique 2

Je tente d'utiliser Windity Api forme ionique 2Utilisez API windity dans ionique 2

donc je suis référenceurs le lien suivant. [widity api] [1]

Et à partir de mon fichier ts, j'ai essayé d'ajouter le fichier js dans le code HTML en utilisant le code.

Mais je recevais erreur windytyInit n'est pas défini.

Est-il possible d'utiliser cette api in ionique 2? Que dois-je faire pour cela?

2017-10-13 hilda_sonica_vish

Les mouvements des cartes sont très satisfaisants! :-D J'ai donc décidé de le faire fonctionner avec ionique. En ionique le seul point où nous pouvons ajouter <script> tags est src/index.html. Nous pouvons donc commencer à ajouter toutes les choses listées dans le tutoriel que vous avez lié ici.

d'abord tout ce que vous ajoutez leaflet.js comme le dernier élément du <head> de index.html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>

Ensuite, vous devez ajouter un div avec l'id windity dans le <body> de index.html. Je l'ai aussi enveloppé dans un container div pour pouvoir "reculer" l'élément (plus sur ça plus tard). Nous devons l'ajouter ici (et pas quelque part dans nos autres templates) car nous ne pouvons pas contrôler quand le script venteux en a besoin et notre template n'est peut-être pas encore disponible, important c'est que vous ajoutez l'élément avant l'élément <ion-app>, sinon la carte est chargé sur le dessus de votre application (j'ai ajouté une propriété de style pour vous assurer que la carte ne soit pas visible avant que nous voulons qu'elle soit visible):

<body> 
    <div id="container"> 
    <div id="windyty" style="visibility: hidden"></div> 
    </div> 
    ...

Et la dernière partie, vous devez ajouter du tutoriel sont la variable d'initialisation et la fonction principale et la dépendance 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>

Ensuite, vous devez faire sur e tous les scripts, css et images à afficher la carte sont autorisés dans votre politique de sécurité de contenu (assurez-vous de faire fusionner celui-ci avec le vôtre):

<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" 
>

Lorsque vous lancez votre application maintenant la carte est chargée, mais ci-dessous votre application ionique. Donc, sur la page ionique où vous voulez réellement afficher la carte, vous devez "déplacer" la balise que nous avons créée en index.html au modèle de votre page. Et voici comment vous le faites:

Vous créez un élément conteneur avec un identifiant dans votre modèle où vous voulez placer la carte:

<div id="windycontainer"></div>

Et dans la classe dactylographiée correspondante vous mettez le code suivant dans méthode ngAfterViewInit() angulaires (vous devez le mettre dans un crochet du cycle de vie où le DOM est déjà disponible, ionViewDidEnter() ne fonctionne trop par exemple):

ngAfterViewInit() { 
    document 
    .getElementById('windycontainer') 
    .appendChild(document.getElementById('windyty')); 
}

Et dans le fichier .scss de votre page, vous ajoutez le Follo aile pour styler l'élément contenant la carte (et pour le rendre visible bien sûr).Vous devez vous assurer que son enveloppé dans le sélecteur de votre page:

your-page { 
    #windyty { 
    height: 500px; 
    width: 100%; 
    position: relative; 
    visibility: visible !important; 
    } 
}

Maintenant, voici la chose: Si nous passons à une autre page maintenant, la page en cours est détruit par angulaire et notre belle carte est perdue. Pour corriger cela, nous devons déplacer notre élément à sa position initiale avant que la page se nuked, le crochet ionViewWillLeave() est l'endroit idéal pour que:

ionViewWillLeave() { 
    document 
    .getElementById('container') 
    .appendChild(document.getElementById('windyty')); 
}

Maintenant, la carte est à nouveau en sécurité à l'extérieur de la <ion-app> et nous pouvons déplacez-le partout où nous en avons besoin à nouveau.

C'est ce que mon résultat final ressemblait à:

Note: Il est sûr d'une manière plus anguleux pour se déplacer autour des balises. En général ce n'est pas une bonne idée d'accéder directement au DOM avec document.getElementById en angulaire mais c'est bien suffisant pour démontrer le concept.

Source

2017-10-13 16:12:34 David

Bon tutoriel/réponse! :) – sebaferreras

Merci @sebaferreras, appréciez ça! – David

excellent travail ...... <3 –

Utilisez API windity dans ionique 2

Répondre

Questions connexes