Angular-google-maps: 'agm-map'์€ ์•Œ๋ ค์ง„ ์š”์†Œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2018๋…„ 12์›” 29์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: SebastianM/angular-google-maps

์•ˆ๋…• ๋ชจ๋‘

์ €๋Š” ๊ฐ๋„์™€ ์ด์˜จ์„ ๋ฐฐ์šฐ๋Š” ํ•™์ƒ์ž…๋‹ˆ๋‹ค
๋‚˜๋Š” angular cli 6.2.4 ๋ฐ ionic 4.2.1์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
Angular Google ์ง€๋„(AGM)๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

app.module.ts์—์„œ npm install @agm/core --save๋ฅผ ์‹คํ–‰ํ•œ ํ›„ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.
'@agm/core'์—์„œ { AgmCoreModule } ๊ฐ€์ ธ์˜ค๊ธฐ;

@NgModule ๊ฐ€์ ธ์˜ค๊ธฐ ๋ฐฐ์—ด์—์„œ AgmCoreModule.forRoot({apiKey: 'API KEY HERE'})๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ถ”๊ฐ€ํ•˜๋ ค๊ณ  ํ•  ๋•Œionic cli๋กœ ๋งŒ๋“  ๊ตฌ์„ฑ ์š”์†Œ ํŽ˜์ด์ง€ ์ค‘ ํ•˜๋‚˜์— ๋‹ค์Œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
'agm-map'์€ ์•Œ๋ ค์ง„ ์š”์†Œ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

  1. 'agm-map'์ด Angular ๊ตฌ์„ฑ ์š”์†Œ์ธ ๊ฒฝ์šฐ ์ด ๋ชจ๋“ˆ์˜ ์ผ๋ถ€์ธ์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.
  2. 'agm-map'์ด ์›น ๊ตฌ์„ฑ ์š”์†Œ์ธ ๊ฒฝ์šฐ ์ด ๊ตฌ์„ฑ ์š”์†Œ์˜ '@NgModule.schemas'์— 'CUSTOM_ELEMENTS_SCHEMA'๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์ด ๋ฉ”์‹œ์ง€๋ฅผ ํ‘œ์‹œํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์žฌ๋ฏธ์žˆ๋Š” ์ ์€ ๋‚ด๊ฐ€ app.html๋กœ ์ด๋™ํ•˜๋ฉด ์„ฑ๊ณต์ ์œผ๋กœ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.์˜ค๋ฅ˜๊ฐ€ ์—†๋Š” ํƒœ๊ทธ

์ด ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚ฌ ์ˆ˜ ์žˆ๋Š” ์•„์ด๋””์–ด

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@n1t3w0lf ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋Š” ์ž์ฒด ๋ชจ๋“ˆ์—์„œ ์ƒ์„ฑํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด AgmModule๋„ ๊ฐ€์ ธ์™€์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

@n1t3w0lf ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋Š” ์ž์ฒด ๋ชจ๋“ˆ์—์„œ ์ƒ์„ฑํ•œ ๊ฒƒ์ž…๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด AgmModule๋„ ๊ฐ€์ ธ์™€์•ผ ํ•ฉ๋‹ˆ๋‹ค.

@ํ—ค๋ธŒ๋ผ
๋‚ด๊ฐ€ ๋งŒ๋“  ๊ฐ ์ƒˆ ํŽ˜์ด์ง€์—๋Š” ์—ฌ๊ธฐ์— ๊ฐ€์ ธ์˜ค๊ธฐ๋ฅผ ์ถ”๊ฐ€ํ•œ ํ›„ module.ts ํŒŒ์ผ์ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๊ท€ํ•˜์˜ ์˜๊ฒฌ์— ์ง„์‹ฌ์œผ๋กœ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค

@n1t3w0 ์ฒœ๋งŒ ์—์š”. ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ๋ฏ€๋กœ ๋ฌธ์ œ๋ฅผ ์ข…๋ฃŒํ•˜์‹ญ์‹œ์˜ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰