Angular 앱에서 Google 지도 설정(Pro Way) 파트 1

14338 단어 angularwebdevtutorialgooglemaps
Angular 앱에 Google 지도를 추가하는 방법이 궁금하다면 방법을 알려드리겠습니다. 훌륭하게 작동하는 AGM과 같이 그렇게 할 수 있는 라이브러리가 있다는 것을 알고 있지만 고급 사용 사례의 경우 여기서 보여줄 방법을 제안할 것입니다. 기본 지도 기능을 찾고 있다면 제 다른 튜토리얼을 따르세요.

참고: 이것은 저장소입니다. 분기 파트 1에는 이 튜토리얼의 최종 코드가 있습니다.

https://github.com/devpato/angular-google-maps-tutorial

1) 새 Angular 프로젝트를 만듭니다.

   ng new angular-gmap


2) Google Maps API 키 생성here

3) 프로젝트 내부에서 index.html 파일로 이동하고 헤드 태그 내부에 다음 줄을 추가합니다.

   <head>
    .
    .
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY" 
    type="text/javascript"></script>
   </head>


4) 이제 스크립트 태그 안에 API 키를 추가하십시오.

5) Angular가 Google Maps 유형을 사용할 수 있도록 추가하려면 유형을 입력하십시오. 터미널에서 다음을 실행합니다.

   npm i @types/googlemaps


6) Google 지도 유형을 사용할 준비가 되었음을 Angular에 알릴 시간입니다. tsconfig.app.json 및 tsconfig.spec.json을 열고 compilerOptions 개체 내부의 유형 배열에 googlemaps를 추가합니다.

참고: tsconfig.app.json 파일에만 넣었습니다. 어떤 사람들은 문제가 발생하여 위에서 언급한 두 파일 모두에 추가해야 합니다.


   "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["googlemaps"]
   },


7) app.component.html 내부에 다음 코드를 추가합니다.

    <div #mapContainer id="map"></div>


8) 지도에 CSS를 추가할 시간입니다. app.component.css 파일로 이동하여 다음을 추가합니다.

   #map {
    height: 500px;
    width: 100%;
   }


참고: 높이를 추가하지 않으면 지도가 앱에 표시되지 않습니다.

9) app.component.ts 파일에서 파일 상단의 가져오기 행은 다음과 같아야 합니다.

  import { Component, AfterViewInit, ViewChild, ElementRef } from 
  '@angular/core';


10) 동일한 파일 내에서 ViewChild로 생성한 DOM 요소에 대한 앱 액세스 권한을 부여합니다.

   @ViewChild('mapContainer', {static: false}) gmap: ElementRef;


여기서 mapContainer는 이전에 생성한 HTML 요소의 이름입니다.

11) 이제 app.component.ts 내부에 Google Maps API가 포함된 지도 변수를 만듭니다.

   map: google.maps.Map;


프로젝트에 추가한 Google 지도 유형 덕분에 이 작업을 수행할 수 있습니다.

12) app.component.ts 파일에서 다음 변수를 추가합니다.

  lat = 40.730610;
  lng = -73.935242;


13)위도와 경도를 사용할 좌표 변수를 만들어 봅시다.

   coordinates = new google.maps.LatLng(this.lat, this.lng);


14) 동일한 파일에서 다음과 같이 mapOptions 변수를 생성합니다.

   mapOptions: google.maps.MapOptions = {
      center: this.coordinates,
      zoom: 8,
    };


15) app.component.ts 내부에 mapInitializer() 함수를 생성합니다.

   mapInitializer() {
    this.map = new google.maps.Map(this.gmap.nativeElement, 
    this.mapOptions);
   }


16) AfterViewInit를 사용할 시간입니다. 파일은 다음과 같아야 합니다.

   ...
   export class AppComponent implements AfterViewInit {
    ...
    ngAfterViewInit() {

    }
   }


17) ngAfterViewInit 내부에 다음 줄을 추가합니다.

   ngAfterViewInit() {
    this.mapInitializer();
   }


마커를 추가할 시간



18) 새 변수 만들기

    marker = new google.maps.Marker({
     position: this.coordinates,
     map: this.map,
   });


19) mapInitializer() 함수에 다음 줄을 추가하여 지도에 마커를 추가합니다.

   this.marker.setMap(this.map);


20) app.component.ts는 다음과 같아야 합니다.

   export class AppComponent implements AfterViewInit {
    title = 'angular-gmap';
    @ViewChild('mapContainer', { static: false }) gmap: ElementRef;
    map: google.maps.Map;
    lat = 40.73061;
    lng = -73.935242;

    coordinates = new google.maps.LatLng(this.lat, this.lng);

    mapOptions: google.maps.MapOptions = {
     center: this.coordinates,
     zoom: 8
    };

    marker = new google.maps.Marker({
      position: this.coordinates,
      map: this.map,
    });

    ngAfterViewInit() {
      this.mapInitializer();
    }

    mapInitializer() {
      this.map = new google.maps.Map(this.gmap.nativeElement, 
      this.mapOptions);
      this.marker.setMap(this.map);
    }
   }


다음과 같은 내용이 표시되어야 합니다.


마커에 여러 마커 및 정보 창을 추가하려면 섹션 부분을 확인하는 것을 잊지 마십시오.

완료된 레포 프로젝트:
https://github.com/devpato/angular-google-maps-tutorial

텍스트 복사 및 Ctrl + V 작업에 대한 이 기능은 jq도 봉인되지 않은 것 같습니다.
js의 계승과 원형 체인 탐구

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage