Angular 애플리케이션에 지도 TomTom 구성 요소 추가

31484 단어 tutorial beginners map angular

소개

Angular은 HTML, CSS 및 TypeScript(JavaScript)를 사용하여 WEB, 모바일 및 데스크톱 애플리케이션을 구축하기 위한 개발 플랫폼입니다. 현재 Angular는 버전 13이며 Google이 프로젝트의 주요 유지 관리자입니다.

@tomtom-international/web-sdk-maps은 TomTom 서비스와의 통합의 복잡성을 숨기고 완벽하게 스타일을 지정할 수 있고 쉽게 사용자 지정할 수 있는 구성 요소로 생산성을 높이는 라이브러리입니다.

전제 조건

시작하기 전에 도구를 설치하고 구성해야 합니다.

git

Node.js and npm

Angular CLI

IDE(예: Visual Studio Code )

시작하기

TomTom에서 계정 생성 및 구성

1. 계정을 생성하자. 사이트https://www.tomtom.com/에 액세스하고 개발자 메뉴를 클릭한 다음 하위 메뉴 개발자 포털을 클릭합니다.

2. 등록 버튼을 클릭합니다.

3. 전체 이름, 사용자 이름, 이메일, 비밀번호 필드를 채우고 Maps API 사용 약관을 읽고 동의했습니다 확인란을 클릭합니다. REGISTER 버튼을 클릭하십시오.

4. 등록된 이메일을 확인합니다.

5. 전송된 이메일에서 계정 활성화 버튼을 클릭합니다.

6. 내 대시보드 링크를 클릭합니다.

7. Keys 메뉴에 표시된 키를 복사합니다. 제 경우에는 Angular 애플리케이션에서 이 키가 구성될 것이기 때문에 키POQwSkANG2wVgN1qMbook38s5EMkN7pG가 표시되었습니다.

8. 준비! 계정이 생성되고 키가 생성되었습니다.

Angular 애플리케이션 만들기

1. 경로 파일 및 SCSS 스타일 형식과 함께 @angular/cli를 사용하여 Angular 기본 구조로 애플리케이션을 생성해 보겠습니다.

ng new angular-tomtom --routing true --style scss
CREATE angular-tomtom/README.md (1059 bytes)
CREATE angular-tomtom/.editorconfig (274 bytes)
CREATE angular-tomtom/.gitignore (620 bytes)
CREATE angular-tomtom/angular.json (3255 bytes)
CREATE angular-tomtom/package.json (1078 bytes)
CREATE angular-tomtom/tsconfig.json (863 bytes)
CREATE angular-tomtom/.browserslistrc (600 bytes)
CREATE angular-tomtom/karma.conf.js (1431 bytes)
CREATE angular-tomtom/tsconfig.app.json (287 bytes)
CREATE angular-tomtom/tsconfig.spec.json (333 bytes)
CREATE angular-tomtom/.vscode/extensions.json (130 bytes)
CREATE angular-tomtom/.vscode/launch.json (474 bytes)
CREATE angular-tomtom/.vscode/tasks.json (938 bytes)
CREATE angular-tomtom/src/favicon.ico (948 bytes)
CREATE angular-tomtom/src/index.html (299 bytes)
CREATE angular-tomtom/src/main.ts (372 bytes)
CREATE angular-tomtom/src/polyfills.ts (2338 bytes)
CREATE angular-tomtom/src/styles.scss (80 bytes)
CREATE angular-tomtom/src/test.ts (745 bytes)
CREATE angular-tomtom/src/assets/.gitkeep (0 bytes)
CREATE angular-tomtom/src/environments/environment.prod.ts (51 bytes)
CREATE angular-tomtom/src/environments/environment.ts (658 bytes)
CREATE angular-tomtom/src/app/app-routing.module.ts (245 bytes)
CREATE angular-tomtom/src/app/app.module.ts (393 bytes)
CREATE angular-tomtom/src/app/app.component.scss (0 bytes)
CREATE angular-tomtom/src/app/app.component.html (23364 bytes)
CREATE angular-tomtom/src/app/app.component.spec.ts (1097 bytes)
CREATE angular-tomtom/src/app/app.component.ts (219 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

2. 부트스트랩 CSS 프레임워크를 설치하고 구성합니다. 게시물의 2단계와 3단계를 수행합니다.

3. 아래와 같이 src/environments/environment.ts 및 src/environments/environment.prod.ts 파일에서 TomTom 키를 구성합니다.

tomtom: {
  key: 'POQwSkANG2wVgN1qMbook38s5EMkN7pG',
},

4. @tomtom-international/web-sdk-maps 라이브러리를 설치합니다.

npm install @tomtom-international/web-sdk-maps

5. @tomtom-international/web-sdk-maps 라이브러리를 구성합니다. angular.json 파일을 변경하고 아래와 같이 maps.css 파일을 추가합니다.

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "node_modules/@tomtom-international/web-sdk-maps/dist/maps.css",
  "src/styles.scss"
],

6. AppComponent 파일에서 src/app/app.component.ts 클래스의 내용을 제거합니다. 아래와 같이 getCurrentPosition 및 loadMap 메서드를 만듭니다.

import { AfterViewInit, Component } from '@angular/core';
import { Observable, Subscriber } from 'rxjs';
import * as tt from '@tomtom-international/web-sdk-maps';

import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {

  map: any;

  constructor() {
  }

  public ngAfterViewInit(): void {
    this.loadMap();
  }

  private getCurrentPosition(): any {
    return new Observable((observer: Subscriber<any>) => {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position: any) => {
          observer.next({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
          });
          observer.complete();
        });
      } else {
        observer.error();
      }
    });
  }

  private loadMap(): void {
    this.map = tt.map({
      key: environment.tomtom.key,
      container: 'map',
    });

    this.map.addControl(new tt.FullscreenControl());
    this.map.addControl(new tt.NavigationControl());

    this.getCurrentPosition()
    .subscribe((position: any) => {
      this.map.flyTo({
        center: {
          lat: position.latitude,
          lng: position.longitude,
        },
        zoom: 13,
      });

      const popup = new tt.Popup({ anchor: 'bottom', offset: { bottom: [0, -40] } }).setHTML('Angular TomTom');

      var marker = new tt.Marker().setLngLat({
        lat: 37.7749,
        lng: -122.4194,
      }).addTo(this.map);
      marker.setPopup(popup).togglePopup();
    });
  }

}

7. src/app/app.component.html 파일의 내용을 제거합니다. 아래와 같이 지도div 태그를 추가합니다.

<div class="container-fluid py-3">
  <h1>Angular TomTom</h1>

  <div id="map" class="map"></div>
</div>

8. 아래와 같이 src/app/app.component.scss 파일에 스타일을 추가합니다.

#map {
  height: 400px;
  width: 100%;
  max-width: 600px;
}

9. 아래 명령으로 애플리케이션을 실행합니다.

npm start

> angular-tomtom@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   3.66 MB | 
styles.css, styles.js | styles        | 521.05 kB | 
polyfills.js          | polyfills     | 339.20 kB | 
scripts.js            | scripts       |  76.33 kB | 
main.js               | main          |  10.36 kB | 
runtime.js            | runtime       |   6.86 kB | 

                      | Initial Total |   4.59 MB

Build at: 2021-12-12T17:33:13.265Z - Hash: e4a77c4fe28aa482 - Time: 4248ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

메모:

오류

Module '"/node_modules/@types/geojson/index"' has no default export. Did you mean to use 'import { GeoJSON } from "/node_modules/@types/geojson/index"' instead?

가 발생하면 아래와 같이 allowSyntheticDefaultImports 파일에 설정tsconfig.json을 추가합니다.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true
  }
}

10. 준비! URLhttp://localhost:4200/에 접속하여 애플리케이션이 작동하는지 확인합니다. GitHub Pages 및 Stackblitz에서 작동하는 응용 프로그램을 참조하십시오.

응용 프로그램 저장소는 https://github.com/rodrigokamada/angular-tomtom에서 사용할 수 있습니다.

이 자습서는 내blog에 포르투갈어로 게시되었습니다.

Reference

이 문제에 관하여(Angular 애플리케이션에 지도 TomTom 구성 요소 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rodrigokamada/adding-the-map-tomtom-component-to-an-angular-application-54fk

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Freezed를 사용하여 데이터 클래스 만들기

[백준-2108] 통계학

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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