Angular-google-maps: ๋ฉ‹์ง„ ์ •๋ณด ์ฐฝ์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Œ

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

๋ฉ‹์ง„ ์ •๋ณด ์ฐฝ์„ ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•ด ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

     <agm-map id = "map" name="map" 
             [latitude]="lat" 
           [longitude]="lng" 
           (boundsChange)="boundsChange($event)" 
          [zoom] = "10"
          [zoomControl]="false"
           #map>
                <agm-marker [latitude]="lat" [longitude]="lng">
                     <agm-snazzy-info-window [isOpen] = "true"
                                          [maxWidth]="200" [closeWhenOthersOpen]="true" 
                                          [latitude]="lat" [longitude]="lng">
                             <ng-template>
                                  My first Snazzy Info Window!
                            </ng-template>
                  </agm-snazzy-info-window>
               </agm-marker>
   </agm-map>

ํ•˜์ง€๋งŒ ๋งˆ์ปค ์ •๋ณด ์ฐฝ์„ ํด๋ฆญํ•ด๋„ ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ง€๋„ ์•ˆ์— ์ง์ ‘ ๋„ฃ์œผ๋ฉด ์—ฌ์ „ํžˆ ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ๋‚ด๊ฐ€ ๋ญ”๊ฐ€ ์ž˜๋ชปํ•˜๊ณ  ์žˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ์‹ญ์‹œ์˜ค.

์•„๋ž˜ ํŒจํ‚ค์ง€๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

agm/core: "^1.0.0-beta.2",
agm/snazzy-info-window: "^1.0.0-beta.2",
๊ฐ๋„/์ฝ”์–ด: "^4.4.6"
๋ฉ‹์ง„ ์ •๋ณด ์ฐฝ: "^1.1.0"

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

๋‚˜๋ฅผ ์œ„ํ•ด ํ•ด๊ฒฐ!
ng serve๋ฅผ ๋‹ค์‹œ ์‹œ์ž‘ํ•˜๋ฉด .angular-cli.json์ด ๋‹ค์‹œ ๋กœ๋“œ๋˜๋ฏ€๋กœ CSS ํŒŒ์ผ์ด ๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค.

์ •๋ณด์ฐฝ์ด ์ด์ œ ์ง€๋„์—์„œ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค!

๋‹น์‹ ์˜ ๋ฌธ์ œ๋„ ํ•ด๊ฒฐ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.
(๊ทธ ๋ฒ„๊ทธ์— ๋Œ€ํ•œ 4์‹œ๊ฐ„, ์žฌ์‹œ์ž‘์„ ์œ„ํ•ด!!!)

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

์•ˆ๋…•ํ•˜์„ธ์š”,
๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์ง€๋งŒ ์ง€๋„์˜ ์™ผ์ชฝ ์ƒ๋‹จ ๋ชจ์„œ๋ฆฌ์— ์ž‘์€ X์™€ ์ฝ˜ํ…์ธ ๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค(์ฒจ๋ถ€ ํŒŒ์ผ ์ฐธ์กฐ).
์•„๋งˆ๋„ CSS ์Šคํƒ€์ผ ๋ฌธ์ œ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
๋‚ด ์ฝ”๋“œ :

<agm-map [latitude]="lat" [longitude]="lon" [zoom]="zoom">
    <agm-marker [latitude]="lat" [longitude]="lon">
        <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true"

>
            <ng-template>
                hop
            </ng-template>
        </agm-snazzy-info-window>
    </agm-marker>
</agm-map>

app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// project components
import { MapComponent } from './map/map.component';

// Third Party
// Material Design Bootstrapmodule
import { MDBBootstrapModule } from 'angular-bootstrap-md';
// Angular Google Map modules
import { AgmCoreModule } from '@agm/core';
import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';


@NgModule({
  declarations: [
    AppComponent,
    MapComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MDBBootstrapModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'my google api key here (mine, not this text)'
    }),
    AgmSnazzyInfoWindowModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

.angular-cli.json, ์Šคํƒ€์ผ ์„ ์–ธ:

      "styles": [
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
        "../node_modules/angular-bootstrap-md/scss/mdb-free.scss",
        "../node_modules/snazzy-info-window/dist/snazzy-info-window.scss", // replace .css by .scss, because I set styleext to .scss. same error with .css. checked, file exists
        "./styles.scss"
      ],

์ข…์†์„ฑ:

"dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@agm/snazzy-info-window": "^1.0.0-beta.2",
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "angular-bootstrap-md": "^5.0.5",
    "chart.js": "^2.5.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "snazzy-info-window": "^1.1.0",
    "zone.js": "^0.8.14"
  },

bugreport-agm-snazzy

๋‚˜๋ฅผ ์œ„ํ•ด ํ•ด๊ฒฐ!
ng serve๋ฅผ ๋‹ค์‹œ ์‹œ์ž‘ํ•˜๋ฉด .angular-cli.json์ด ๋‹ค์‹œ ๋กœ๋“œ๋˜๋ฏ€๋กœ CSS ํŒŒ์ผ์ด ๋กœ๋“œ๋ฉ๋‹ˆ๋‹ค.

์ •๋ณด์ฐฝ์ด ์ด์ œ ์ง€๋„์—์„œ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค!

๋‹น์‹ ์˜ ๋ฌธ์ œ๋„ ํ•ด๊ฒฐ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.
(๊ทธ ๋ฒ„๊ทธ์— ๋Œ€ํ•œ 4์‹œ๊ฐ„, ์žฌ์‹œ์ž‘์„ ์œ„ํ•ด!!!)

์ด๊ฒƒ์€ ๋ฒ„๊ทธ๋‚˜ ๊ตฌ์ฒด์ ์ธ ๊ธฐ๋Šฅ ์š”์ฒญ์„ ๋‚˜ํƒ€๋‚ด์ง€ ์•Š๋Š” ์ง€์› ๋ฌธ์ œ์ด๋ฏ€๋กœ ์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์—์„œ ์ž์œ ๋กญ๊ฒŒ ์ฑ„ํŒ…ํ•˜๊ฑฐ๋‚˜ Gitter์˜ ๊ณต์‹ ์ฑ„ํŒ…๋ฐฉ์„ ์‚ฌ์šฉํ•˜์„ธ์š”. https://gitter.im/SebastianM/angular2-google-maps

@agm/snazzy-info-window์˜ CSS๊ฐ€ ์•„์ง @vincent-ledu๋ฅผ ๊ฐ€์ ธ์˜ค์ง€ ์•Š๋Š”๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

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