소개

Angular Google Maps라는 라이브러리를 사용하여 Ionic에서 Google Maps를 사용해 보았습니다.

AGM이란?

Angular에서 쉽게 Google Maps JS API를 사용할 수있는 라이브러리입니다.

설정

설치

npm install --save-dev @agm/core

Angular 5에서는 beta.2를 사용하지 않으면 떨어집니다 htps : // 기주 b. 코 m / 시바 s 치안 M / 앙구 r 고 오 g ぇ 마 ps / 이스에 s / 1511
app.module.ts 에서 AgmCoreModule.forRoot() 를 import

app.module.ts

@NgModule({
  // ...
  imports: [
    AgmCoreModule.forRoot({
      apiKey: 'Google Maps の api key'
    }),
  ]
// ...
});

(Ionic 전용) 사용 Page에서 AgmCoreModule
page.module.ts

@NgModule({
  // ...
  imports: [
    AgmCoreModule
  ]
// ...
});

사용법

기본 사용법

<agm-map [longitude]="135" [latitude]="35" [zoom]="16"></agm-map>

css로 높이를 지정합니다 (필수).

agm-map {
  height: 200px;
}

마커 표시

<agm-map [longitude]="135" [latitude]="35" [zoom]="16">
  <agm-marker [longitude]="135" [latitude]="35" label="P"></agm-marker>
</agm-map>

원 표시

 <agm-map [latitude]="35" [longitude]="135" [zoom]="16">
    <agm-circle
      [latitude]="35" [longitude]="135" [radius]="20"
      srokeColor="white" [strokePosition]="0" [strokeOpacity]="1.0" [strokeWeight]="2"
      fillColor="white" [fillOpacity]="1.0" ></agm-circle>
  </agm-map>

strokeWeight 는 px 입니다만, radius 는 지도상에서의 크기이므로, 줌 하면 상대적으로 선이 가늘어집니다 (원은 커지지만, 선의 굵기는 변하지 않는다).

strokeWeight를 단독으로 지정하면 떨어집니다. [strokePosition]="0" 를 추가하면 고쳐집니다 (원인을 잘 모르겠습니다). htps : // 기주 b. 코 m / 시바 s 치안 M / 앙구 r 고 오 g ぇ 마 ps / 이스에 s / 770

선 표시

  <agm-map [latitude]="35" [longitude]="135" [zoom]="16">
    <agm-polyline [strokeWeight]="2">
      <agm-polyline-point [latitude]="34.999" [longitude]="134.999"></agm-polyline-point>
      <agm-polyline-point [latitude]="35" [longitude]="135"></agm-polyline-point>
      <agm-polyline-point [latitude]="34.999" [longitude]="135.001"></agm-polyline-point>
    </agm-polyline>
  </agm-map>

다각형 표시

<agm-map [latitude]="35" [longitude]="135" [zoom]="16">
  <agm-polygon
    fillColor="white" fillOpacity="1.0"
    [paths]="[{ lat: 34.999, lng: 135 }, { lat: 35, lng: 134.999 }, { lat: 35, lng: 135.001 }]"></agm-polygon>
  </agm-map>