windity API를 ionic 2에서 사용하십시오.

바람이 나는 API를 ionic 2에서 사용하려고합니다.windity API를 ionic 2에서 사용하십시오.

그래서 다음 링크를 참조하고있었습니다. [widity api] [1]

내 ts 파일에서 코드를 사용하여 HTML 파일에 js 파일을 추가하려고했습니다.

하지만 오류가 발생했습니다. windytyInit가 정의되지 않았습니다.

이 API는 이온 2에 사용할 수 있습니까? 내가 어떻게해야합니까?

2017-10-13 hilda_sonica_vish

지도의 움직임은 매우 만족 스럽습니다! :-D 그래서 이온으로 작동하도록하기로 결정했습니다. 이오니아에서는 <script> 태그를 추가 할 수있는 유일한 지점은 src/index.html입니다. 그래서 거기에 링크 된 튜토리얼에 나열된 모든 것을 추가 할 수 있습니다. 모든

먼저 당신은 index.html의 <head>의 마지막 요소로 leaflet.js를 추가

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

는 그런 다음 index.html의 <body>의 ID windity와 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() 방법 (당신이 ionViewDidEnter() 예를 들어 너무 작동합니까, DOM을 이미 사용할 수있는 라이프 사이클 후크에 넣어 필요) : 당신이 FOLLO를 추가

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

그리고 페이지의 .scss 파일에

지도가 포함 된 요소의 스타일을 지정하고 (물론지도를 표시 할 수 있도록)당신은 페이지의 선택에 싸여 있는지 확인해야합니다

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

지금을 heres 일 : 우리가 지금 다른 페이지로 이동하면, 현재 페이지는 각도에 의해 파괴되고 우리의 좋은 맵이 손실됩니다. 이제지도가 <ion-app>와 우리가 할 수있는 외부 다시 안전

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

: 우리는 페이지가 핵 공격되기 전에 초기 위치로 다시 우리의 요소를 이동해야이 문제를 해결하기 위해, ionViewWillLeave() 후크는위한 완벽한 장소입니다 우리가 다시 필요할 때마다 그것을 옮기십시오.

참고 :

이 내 최종 결과가 어떻게 생겼는지입니다 태그 주위에 이동하십시오 더 각 방법을이. 일반적으로 document.getElementById을 사용하여 DOM에 직접 액세스하는 것은 좋지 않지만 개념을 설명하기에 좋은 enougth입니다.

출처

2017-10-13 16:12:34 David

좋은 가이드/답변! :) – sebaferreras

Thanks @sebaferreras, 고맙습니다! – David

위대한 작품 ...... <3 –

windity API를 ionic 2에서 사용하십시오.

답변

관련 문제