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

소개

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

선결 조건

이 강좌를 완성하려면 다음이 필요합니다.

노드.js를 로컬에 설치하면 다음과 같은 방식으로 조작할 수 있습니다 How to Install Node.js and Create a Local Development Environment.

익숙함setting up an Angular project과 using 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 를 사용하여 새 각도 항목을 작성할 수 있습니다.
터미널 창에서 다음 명령을 사용합니다.

npx @angular/cli new angular-google-maps-example --style=css --routing=false --skip-tests

이렇게 하면 새 각도 항목이 구성되고 테스트를 경로설정하거나 건너뛸 필요 없이 스타일을 CSS(Sass, Less 또는 터치펜 상대)로 설정합니다.
새로 만든 프로젝트 디렉토리로 이동하려면 다음과 같이 하십시오.

cd angular-google-maps-example

프로젝트 폴더에서 다음 명령을 실행하여 설치합니다@agm/core.

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 - 샘플 맵 구성 요소 구축

이제 사용자 정의 맵 구성 요소를 만들 수 있습니다.

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.3069와longitudeat-157.8583(하와이 단향산)의 새로운 맵을 만들 것입니다.
참고: 요소의 높이를 CSS에서 명시적으로 설정해야 합니다.
이 새 agm-map 구성 요소를 사용하려면 수정app.component.html:
src/app/app.구성 부분html

<my-agm-example></my-agm-example>

그리고 지금까지의 상황을 관찰하기 위해 프로그램을 시작합니다.

npm start

웹 브라우저에서 응용 프로그램에 접근할 때 하와이 단향산을 중심으로 한 위성 보기의 구글 지도를 볼 수 있을 것입니다.

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

my-agm-example 구성 요소의 템플릿에 다른 구성 요소를 추가할 수 있습니다.다른 구성 옵션도 설정할 수 있습니다.이 강좌는 지도에서만 모양을 그리는 것을 소개하지만, full documentation 에서 사용할 수 있는 모든 옵션을 볼 만하다.
위도와 경도 값 초기화<agm-map> 구성 요소를 사용하면 지도가 특정 좌표의 중심에 위치하게 됩니다.단, 지도상의 어느 위치에 임의의 수량의 표시와 모양을 놓을 수도 있습니다.<agm-map> 파일을 열고 사용MyAgmExample.component.ts 및 agm-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 사용자가 지도의 위치를 클릭할 때마다 이벤트가 발생합니다.이 예에서 사용자가 지도를 눌렀을 때 지도에 새 표시를 추가합니다.
표기는 지도상의 압정과 같다.다음과 같은 특징이 있습니다.
필요

mapClick및latitude

longitude 태그의 투명도 변경

opacity, 사용자가 지도 주위를 클릭하고 누르고 표시를 드래그할 수 있음

markerDraggable, 사용자가 단일 태그를 클릭할 때 이벤트를 처리할 수 있음

이 강좌에서 markerClick 촉발markerClick, 이것은 서로 다른 addMarker 을 사용하여 새로운 안내를 놓을 것이다.
코드는 지도의 모든 표시를 저장하기 위한 수조가 있다.이 수조는 이미 몇 개의 무작위 위치를 채웠다.
지도에 직사각형 모양을 추가했습니다.직사각형의 경계 - opacity, north, south 및 east - 표시된 모든 위도와 경도의 가장 원극값으로 계산됩니다.이 계산에 근거하여 새 태그를 추가할 때마다 해당 태그가 그려진 사각형 밖에 있으면 새 외부 가장자리로 다시 그려집니다.
그리고 west, AgmPolygon, AgmCircle.마지막으로, AgmPolyLine 지도에 이 모든 요소를 그릴 수 있도록 합니다.
경고: 실험이 완료되면 Google 클라우드 콘솔에 로그인하여 API 키를 삭제하고 관련 비용 계정을 삭제하여 잠재적인 남용을 피하는 것이 좋습니다.
당신은 현재 표시와 직사각형 모양의 구글 지도를 가지고 있습니다.

결론

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