Angular-google-maps: ๋ Œ๋”๋ง ์‹œ agm-snazzy-info-window ์˜ค๋ฅ˜

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

๋ฌธ์ œ ์„ค๋ช…
๋งˆ์ปค ์—†์ด agm-snazzy-info-window๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•˜๋Š”๋ฐ ์ด ์ฐฝ์„ ๋ Œ๋”๋งํ•  ๋•Œ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
๋‹ค์Œ์€ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

<div *ngIf="selectedMarker" >
    <agm-snazzy-info-window 
         [latitude]="selectedMarker.latitude" 
         [longitude]="selectedMarker.longitude"
         [isOpen]="true">
      {{selectedMarker.id}}
    </agm-snazzy-info-window>
</div>

_๋ฐ๋ชจ์—์„œ ๋ฌธ์ œ๋ฅผ ํ™•์ธํ•˜๋ ค๋ฉด ์–ด๋–ค ๋‹จ๊ณ„๋ฅผ ์‹œ๋„ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ?_

agm-snazzy-info-window UI ๊ตฌ์„ฑ ์š”์†Œ ์ถ”๊ฐ€, ์ž…๋ ฅ ๋งค๊ฐœ๋ณ€์ˆ˜ ์„ค์ • [isOpen]="true"

ํ˜„์žฌ ํ–‰๋™

์ฝ˜์†” ์˜ค๋ฅ˜:

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'createEmbeddedView' of undefined TypeError: Cannot read property 'createEmbeddedView' of undefined at ViewContainerRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewContainerRef_.createEmbeddedView (core.es5.js:10056) at AgmSnazzyInfoWindow.webpackJsonp.../../../../@agm/snazzy-info-window/directives/snazzy-info-window.js.AgmSnazzyInfoWindow._createViewContent (snazzy-info-window.js:154) at snazzy-info-window.js:140 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392) at Object.onInvoke (core.es5.js:3890) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142) at zone.js:844 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881) at ViewContainerRef_.webpackJsonp.../../../core/@angular/core.es5.js.ViewContainerRef_.createEmbeddedView (core.es5.js:10056) at AgmSnazzyInfoWindow.webpackJsonp.../../../../@agm/snazzy-info-window/directives/snazzy-info-window.js.AgmSnazzyInfoWindow._createViewContent (snazzy-info-window.js:154) at snazzy-info-window.js:140 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392) at Object.onInvoke (core.es5.js:3890) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:142) at zone.js:844 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881) at resolvePromise (zone.js:795) at zone.js:847 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192) at drainMicroTaskQueue (zone.js:602) at <anonymous>

angular2 ๋ฐ angular-google-maps ๋ฒ„์ „

    "agm/core": "1.0.0-beta.1",
    "agm/snazzy-info-window": "1.0.0-beta.1",
    "snazzy-info-window": "1.1.0",

๊ธฐํƒ€ ์ •๋ณด

ํ…œํ”Œ๋ฆฟ์—์„œ [isOpen] ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ œ๊ฑฐํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

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

๊ฐ™์€ ๋ฌธ์ œ๊ฐ€์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ๋ฌธ์„œ๋ฅผ ํ™•์ธํ•œ ํ›„
https://angular-maps.com/guides/snazzy-info-window/custom-info-windows-with-snazzy-info-window/ ์ฝ˜ํ…์ธ ๋ฅผ <ng-template> ๋ž˜ํ•‘ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. <agm-snazzy-info-window> ์˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์€ ํšจ๊ณผ๊ฐ€ ์žˆ์—ˆ๋‹ค :)

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

์—ฌ๊ธฐ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€...

๊ฐ™์€ ๋ฌธ์ œ๊ฐ€์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ๋ฌธ์„œ๋ฅผ ํ™•์ธํ•œ ํ›„
https://angular-maps.com/guides/snazzy-info-window/custom-info-windows-with-snazzy-info-window/ ์ฝ˜ํ…์ธ ๋ฅผ <ng-template> ๋ž˜ํ•‘ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. <agm-snazzy-info-window> ์˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๊ทธ๊ฒƒ์€ ํšจ๊ณผ๊ฐ€ ์žˆ์—ˆ๋‹ค :)

์ด ๋ฌธ์ œ๋Š” ์ตœ๊ทผ ํ™œ๋™์ด ์—†์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ž๋™์œผ๋กœ ์˜ค๋ž˜๋œ ๊ฒƒ์œผ๋กœ ํ‘œ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋” ์ด์ƒ ํ™œ๋™์ด ์—†์œผ๋ฉด ํ์‡„๋ฉ๋‹ˆ๋‹ค. ๊ท€ํ•˜์˜ ๊ธฐ์—ฌ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

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