이온형

Ionic의 장점은 웹 개발 프레임워크(예를 들어 Angular,React,Vue 또는 순수한Javascript)를 알고 있다면 플랫폼을 뛰어넘는 모바일 응용 프로그램을 즉시 만들 수 있다는 것이다.학습 곡선이 짧아지고 생산성이 높아진다는 뜻이다.
그러나 일부 사람들은 Ionic 프로그램이 원본 프로그램이 아니라 Flatter나 Kotlin으로 만든 '진짜' 원본 프로그램보다 느린 프로그램을 만들 수 있다고 말할 수 있다.좋아요.그러나 정보학에서 자주 쓰이는 한마디를 잊어서는 안 된다. "이것은 정말... 에 달려 있다."이것은 당신의 팀에 달려 있고, 당신의 시간표에 달려 있으며, 응용 프로그램을 실행할 장치에 달려 있다.

목표

이 문서의 목표는 다음과 같습니다.

은 Ionic 4와 Angular를 사용하여 프로젝트를 만들었습니다.

은 구글 지도를 이 프로젝트에 통합한다.

은 가운데, 지도 입력과 출력 등 지도 기능을 연습한다.

1. 프로젝트 설정

시작 프로젝트의 기본 의존 항목은 노드입니다.js와 Angular.노드가 없으면js, here으로 가세요.Angular가 설치되어 있지 않으면 here으로 이동하십시오.두 개를 모두 설치한 후에는 Ionic을 설치해야 합니다.다음을 입력하기만 하면 됩니다.npm install -g @ionic/cli자세한 내용은 here을 클릭하십시오.
마지막으로 에오니아 4 프로젝트를 만들어 봅시다.유형:ionic start그런 다음 프레임으로 Angular를 선택합니다.

다음은 초보자 템플릿으로 항목의 이름을 짓고 옆 메뉴를 선택하십시오. 아래와 같습니다.

다음에 질문이 있으면 "Integrate your new app with Capacitor to target native iOS and Android? (y/N)"을 선택하고 템플릿이 완전히 생성될 때까지 기다리십시오.
의존항을 하나만 더 추가하면 우리는 시작할 수 있다.프로젝트 폴더로 이동하여 다음을 입력하여 이 의존 항목을 설치합니다.npm install @angular/google-maps다음: code .을 입력하여 VS코드에서 프로젝트를 열고, 프로젝트에 들어간 후 터미널 ionic serve에 입력하여 템플릿이 시작되고 실행 중인지 확인합니다.만약 모든 것이 정상이라면, 이 그림은 http://localhost:8100에서 볼 수 있습니다. 이것은 F12 키를 누르면 브라우저의 모바일 장치를 모의합니다.

2. 구글 지도 통합

구글 지도는 완벽해!그러나 응용 프로그램에 통합해서 사용하기 위해서는 비용을 지불해야 한다.공짜는 없죠?구글은 요금 계산과 지도 API here을 어떻게 사용하는지에 대한 상세한 설명을 가지고 있다.지불 과정이 끝난 후 (걱정하지 마십시오. 어떤 비용도 미리 지불할 필요가 없습니다.) 구글이 제공하는 지도 서비스와 비용을 사용할 수 있는 API 키를 받을 수 있습니다.

2.1 어플리케이션

우리는 다음과 같은 장면을 고려할 것이다. 우리는 생성된 템플릿을 조정하여 우편선 관광객에게 흥미를 주는 관광 응용 프로그램에 적용할 것이다.우리의 프로그램은 배가 정박한 위치 부근의 흥미를 나타낼 것이다.이러한 취미점은 다음과 같은 유형(식당, 필수, 화장실, 관광객 정보)으로 나뉜다.

2.2 생성에 적합한 사이드 메뉴 항목

Google Maps Component을 사용하여 통합을 단순화합니다.먼저 index.html으로 이동한 다음
다음 스크립트 행을 추가합니다.<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>Google Chargeback 프로세스가 완료된 후 생성된 API 키는 변수 "YOUR API KEY"가 아닌 다른 API 키를 사용해야 합니다.
다음에 우리는 관광 환경에 따라 템플릿을 조정해야 한다.생성된 템플릿이 메일박스처럼 보이기 때문에 위아래 문장을 변경합니다.'수신함'을'환영','[email protected]'을'[email protected]'으로 바꾸고 라벨을 완전히 제거하고 아이콘과 아이콘을 조정하여 전체, 식당, 필수, 화장실, 관광객 정보를 표시합니다.
이제 애플리케이션이 다음과 같이 표시됩니다.

폴더 구성 요소로 이동하여 folder.module.ts 파일에서 Google MapsModule을 가져오기에 추가합니다.
그러나 폴더 구성 요소에서 템플릿으로 이동하여 div과 id=container에서 다음 코드로 코드를 대체합니다.

    <google-map
    height="500px"
    width="500px"
    >
    </google-map>

이론적으로 말하자면 그 다음에 구글 지도는 응용 프로그램에 다음과 같이 표시되어야 한다.

3. 구글 지도 기능

구글 지도가 중심이 어디에 있는지 알 수 없을 때 집으로 돌아간다는 것을 이전 사진에서 볼 수 있다.이 프로젝트가 캘리포니아의 Google Plex에 처음 집중된 이유입니다.중심을 어딘가로 바꾸기 위해서는 이곳의 위도와 경도를 발견해야 한다(지도를 클릭하면 좌표는 다음과 같다).
folder.page.ts에 변수 center을 만들고 다음과 같이 경도와 위도 속성을 설정합니다.center = new google.maps.LatLng(-8.063242, -34.871048);템플릿을 업데이트하려면 다음과 같이 하십시오.

    <google-map
    height="700px"
    width="500px"
    [center]="center"
    >
    </google-map>

현재 우리는 지도가 center 변수에 따라 정의된 좌표 가운데를 볼 수 있다.

3.1 관심 분야

이제 취미를 정의해 봅시다.이를 위해 우리는 tool을 사용하여 관심 있는 점 목록을 생성하고 이와 관련된 의미 있는 데이터를 추가할 수 있다.
예를 들어 지도의 어느 곳을 클릭하면 제목과 클래스 같은 속성을 추가하고 오른쪽에 정의된 json을 생성할 수 있습니다.

다음에 json점을 가져와points라는 파일을 만듭니다.json을 파일로 가져옵니다.
가능한 관점json 파일은 다음과 같습니다.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Marco Zero",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.871112406253815,
          -8.063165383068121
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Malakoff Tower",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.87082004547119,
          -8.060759318240265
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Cais do Sertão Museum",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.87032651901245,
          -8.061216099860022
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "marker-color": "#7e7e7e",
        "marker-size": "medium",
        "marker-symbol": "",
        "title": "Kahal-Zur-Israel Sinagoge",
        "cat": "mustsee"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.87139403820038,
          -8.06174192922556
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -34.871858060359955,
          -8.061085970265072
        ]
      }
    }
  ]
}

또한 json 파일을 사용하려면 tsconfig.json 파일로 이동하여 컴파일러 옵션에 다음을 추가합니다.

 "resolveJsonModule": true, "esModuleInterop": true

이렇게 하면 다음과 같이 json 파일을 가져올 수 있습니다.import points from './points.json'마지막으로, 우리는 우리가 정의한 점에 표시를 해야 한다.다음 어셈블리를 사용하여 태그를 정의합니다.

    <map-marker
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
  >
  </map-marker>

우리는 부분이나 모든 점만 표시하기 위해 선택한 모든 취미점을 필터해야 한다.예를 들어, [모두]를 클릭하거나 응용 프로그램을 처음 열면 다음 사항이 표시됩니다.

그러나 [보기 필수]를 클릭하면 다음 사항만 표시됩니다.

모든 코드는 here입니다. 본고가 여러분에게 도움이 되었으면 좋겠습니다!
글꼴:
https://timdeschryver.dev/blog/google-maps-as-an-angular-component