Angular의 Google 맵과 Angular Google 맵을 통합하는 방법

Angular의 Google 맵과 Angular Google 맵을 통합하는 방법

2022-06-01 last update

23 minutes reading Angular

소개


구글 지도는 구글이 제공하는 지도 서비스로 다양한 설정 설정을 지원한다.구글 지도를 응용 프로그램에 추가하면 사용자에게 거리 주소나 좌표집보다 더 많은 상하문 정보를 제공할 수 있다.
Angular Google Maps는 Google Maps API를 활용하기 위한 각도 응용 프로그램의 도구입니다.
이 강좌에서 @agm/core 라이브러리를 사용하고 표시가 있는 지도를 만들 것입니다.

선결 조건


이 강좌를 완성하려면 다음이 필요합니다.
  • 노드.js를 로컬에 설치하면 다음과 같은 방식으로 조작할 수 있습니다 How to Install Node.js and Create a Local Development Environment.
  • 익숙함setting up an Angular projectusing Angular components이 유익할 수 있다.
  • AGoogle Maps JavasScript API Key.
  • 구글 계정이 필요합니다.
  • Google 클라우드 플랫폼 콘솔에 로그인합니다.
  • 새 프로젝트를 만듭니다.
  • 프로젝트에 Google Maps JavasScript API를 사용합니다.
  • 및 API 키에 대한 자격 증명을 생성합니다.
  • 참고: Google Maps API를 사용할 때 "개발용"메시지가 표시되지 않도록 Google 클라우드 프로젝트의 비용 계정과 연결된 유효한 신용카드를 제공해야 하지만 이 강좌에서는 이를 요구하지 않습니다.
    이 강좌는 노드 v14.13.1, npm v6.14.8, angular v10.1.5와 @agm/core v1.1.0을 통해 검증되었다.

    단계 1 - 항목 설정


    @angular/cli 를 사용하여 새 각도 항목을 작성할 수 있습니다.
    터미널 창에서 다음 명령을 사용합니다.
    1. npx @angular/cli new angular-google-maps-example --style=css --routing=false --skip-tests
    이렇게 하면 새 각도 항목이 구성되고 테스트를 경로설정하거나 건너뛸 필요 없이 스타일을 CSS(Sass, Less 또는 터치펜 상대)로 설정합니다.
    새로 만든 프로젝트 디렉토리로 이동하려면 다음과 같이 하십시오.
    1. cd angular-google-maps-example
    프로젝트 폴더에서 다음 명령을 실행하여 설치합니다@agm/core.
    1. npm install @agm/core@1.1.0
    주: 현재 현대 버전3.0.0-beta.0이 발표되었습니다.이 버전을 사용하려면 설치@types/googlemaps도 해야 합니다.
    그러나 본 강좌를 검증하는 과정에서 우리는 직사각형 모양을 사용해서 틀리지 않도록 강등 버전 @types/googlemaps (v3.39.12)과 최종 강등 버전 @agm/core (v1.1.0)을 사용해야 하는 문제에 부딪혔다.
    코드 편집기에서 열기 app.module.ts 및 지원으로 수정하기 @agm/core:
    src/app/app.단원ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AgmCoreModule } from '@agm/core';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AgmCoreModule.forRoot({
          apiKey: 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE'
        })
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    
    실제 API 키로 교체해야 합니다'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE'.
    경고: GitHub와 같은 공용 저장소에 제출한 파일에 API 키를 저장하지 마십시오. 다른 사람이 원하지 않는 목적으로 사용할 수 있기 때문입니다.
    응용 프로그램이 준비되었습니다@agm/core. 사용자 정의 구성 요소를 만들어서 사용할 수 있습니다.

    단계 2 - 샘플 맵 구성 요소 구축


    이제 사용자 정의 맵 구성 요소를 만들 수 있습니다.
    1. npx @angular/cli generate component MyAgmExample --flat=true --inlineStyle=true --inlineTemplate=true
    그러면 별도의 CSS 파일이나 HTML 템플릿 파일이 필요 없이 MyAgmExample 디렉토리에 새 src/app 구성 요소가 생성됩니다.또한 이 새 구성 요소를 app.module.ts 에 추가합니다.
    MyAgmExample.component.ts 파일을 열고 사용으로 수정합니다agm-map.
    src/app/MyAgmExample.구성 부분ts
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'my-agm-example',
      template: `
        <agm-map
          [latitude]="lat"
          [longitude]="lng"
          [mapTypeId]="mapType"
        >
        </agm-map>
      `,
      styles: [
        'agm-map { height: 300px; }'
      ]
    })
    export class MyAgmExampleComponent implements OnInit {
      lat = 21.3069;
      lng = -157.8583;
      mapType = 'satellite';
    
      constructor() { }
    
      ngOnInit(): void { }
    }
    
    이것은 satellite,latitudeat21.3069longitudeat-157.8583(하와이 단향산)의 새로운 맵을 만들 것입니다.
    참고: 요소의 높이를 CSS에서 명시적으로 설정해야 합니다.
    이 새 agm-map 구성 요소를 사용하려면 수정app.component.html:
    src/app/app.구성 부분html
    <my-agm-example></my-agm-example>
    
    그리고 지금까지의 상황을 관찰하기 위해 프로그램을 시작합니다.
    1. npm start
    웹 브라우저에서 응용 프로그램에 접근할 때 하와이 단향산을 중심으로 한 위성 보기의 구글 지도를 볼 수 있을 것입니다.

    단계 3 - 표식과 경계를 사용하여 고급 지도 구성 요소 구축

    my-agm-example 구성 요소의 템플릿에 다른 구성 요소를 추가할 수 있습니다.다른 구성 옵션도 설정할 수 있습니다.이 강좌는 지도에서만 모양을 그리는 것을 소개하지만, full documentation 에서 사용할 수 있는 모든 옵션을 볼 만하다.
    위도와 경도 값 초기화<agm-map> 구성 요소를 사용하면 지도가 특정 좌표의 중심에 위치하게 됩니다.단, 지도상의 어느 위치에 임의의 수량의 표시와 모양을 놓을 수도 있습니다.<agm-map> 파일을 열고 사용MyAgmExample.component.tsagm-marker으로 수정합니다.
    @Component({
      selector: 'my-agm-example',
      template: `
        <agm-map
          [latitude]="lat"
          [longitude]="lng"
          [zoom]="2"
          (mapClick)="addMarker($event.coords.lat, $event.coords.lng)"
        >
          <agm-marker
            *ngFor="let marker of markers"
            [latitude]="marker.lat"
            [longitude]="marker.lng"
            [opacity]="marker.alpha"
            [markerDraggable]="true"
            (markerClick)="selectMarker($event)"
          >
          </agm-marker>
          <agm-rectangle
            [north]="max('lat')"
            [east]="max('lng')"
            [south]="min('lat')"
            [west]="min('lng')"
          >
          </agm-rectangle>
        </agm-map>
        <p *ngIf="selectedMarker">
          Lat: {{ selectedMarker.lat }} Lng: {{ selectedMarker.lng }}
        </p>
      `,
      styles: [
        'agm-map { height: 300px; }'
      ],
    })
    
    export class MyAgmAdvancedExample {
      lat = 48.75606;
      lng = -118.859;
    
      selectedMarker = null;
    
      markers = [
        // These are all just random coordinates from https://www.random.org/geographic-coordinates/
        { lat: 22.33159, lng: 105.63233, alpha: 1 },
        { lat: 7.92658, lng: -12.05228, alpha: 1 },
        { lat: 48.75606, lng: -118.859, alpha: 1 },
        { lat: 5.19334, lng: -67.03352, alpha: 1 },
        { lat: 12.09407, lng: 26.31618, alpha: 1 },
        { lat: 47.92393, lng: 78.58339, alpha: 1 }
      ];
    
      addMarker(lat: number, lng: number) {
        this.markers.push({ lat, lng, alpha: 0.4 });
      }
    
      max(coordType: 'lat' | 'lng'): number {
        return Math.max(...this.markers.map(marker => marker[coordType]));
      }
    
      min(coordType: 'lat' | 'lng'): number {
        return Math.min(...this.markers.map(marker => marker[coordType]));
      }
    
      selectMarker(event) {
        this.selectedMarker = {
          lat: event.latitude,
          lng: event.longitude
        };
      }
    }
    
    우선, 맵 자체에 두 가지 추가 속성을 설정했습니다. 입력 agm-rectangle 과 이벤트 처리 프로그램 zoom 입니다.축소 표시는 처음에 지도의 확대 또는 축소 거리를 표시합니다.0은 가장 먼 표시 위치로 지도의 위치와 유형에 따라 약 22까지 올라간다.mapClick 사용자가 지도의 위치를 클릭할 때마다 이벤트가 발생합니다.이 예에서 사용자가 지도를 눌렀을 때 지도에 새 표시를 추가합니다.
    표기는 지도상의 압정과 같다.다음과 같은 특징이 있습니다.
    필요
  • mapClicklatitude
  • longitude 태그의 투명도 변경
  • opacity, 사용자가 지도 주위를 클릭하고 누르고 표시를 드래그할 수 있음
  • markerDraggable, 사용자가 단일 태그를 클릭할 때 이벤트를 처리할 수 있음
  • 이 강좌에서 markerClick 촉발markerClick, 이것은 서로 다른 addMarker 을 사용하여 새로운 안내를 놓을 것이다.
    코드는 지도의 모든 표시를 저장하기 위한 수조가 있다.이 수조는 이미 몇 개의 무작위 위치를 채웠다.
    지도에 직사각형 모양을 추가했습니다.직사각형의 경계 - opacity, north, southeast - 표시된 모든 위도와 경도의 가장 원극값으로 계산됩니다.이 계산에 근거하여 새 태그를 추가할 때마다 해당 태그가 그려진 사각형 밖에 있으면 새 외부 가장자리로 다시 그려집니다.
    그리고 west, AgmPolygon, AgmCircle.마지막으로, AgmPolyLine 지도에 이 모든 요소를 그릴 수 있도록 합니다.
    경고: 실험이 완료되면 Google 클라우드 콘솔에 로그인하여 API 키를 삭제하고 관련 비용 계정을 삭제하여 잠재적인 남용을 피하는 것이 좋습니다.
    당신은 현재 표시와 직사각형 모양의 구글 지도를 가지고 있습니다.

    결론


    이 강좌에서는 Angular 응용 프로그램AgmDataLayer과 Google Maps API 기능을 사용하는 방법을 학습했습니다.
    이것은 관광객에게 상업, 관광 목적지와 취미점의 위치를 보여줄 잠재력이 매우 크다.
    Angular에 대한 자세한 내용은 GeoJSON 의 연습 및 프로그래밍 항목을 참조하십시오.