Angular-google-maps: おしゃれな情報ウィンドウが表示されない

作成日 2017年11月27日  ·  4コメント  ·  ソース: SebastianM/angular-google-maps

Iamは以下のコードを使用しておしゃれな情報ウィンドウを表示します

     <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>

しかし、マーカー情報ウィンドウをクリックしても表示されません。 また、デフォルトでは、マップ内に直接配置しても表示されません。 iamがここで何か間違ったことをしている場合はお知らせください。

以下のパッケージを使用しているIam

agm / core: "^ 1.0.0-beta.2"、
agm / snazzy-info-window: "^ 1.0.0-beta.2"、
角度/コア: "^ 4.4.6"
snazzy-info-window: "^ 1.1.0"

最も参考になるコメント

私のために解決しました!
ngserveを再起動すると.angular-cli.jsonがリロードされるため、cssファイルがロードされます。

infowindowがマップにレンダリングされるようになりました!

それがあなたの問題も解決することを願っています。
(再起動のために、そのバグで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

私のために解決しました!
ngserveを再起動すると.angular-cli.jsonがリロードされるため、cssファイルがロードされます。

infowindowがマップにレンダリングされるようになりました!

それがあなたの問題も解決することを願っています。
(再起動のために、そのバグで4時間!!!)

これはバグや具体的な機能のリクエストを表すものではないサポートの問題であるため、この問題を解決します。 以下でお気軽にチャットするか、Gitterの公式チャットルームを使用してください: https ://gitter.im/SebastianM/angular2-google-maps

@ agm / snazzy-info-windowのcssはまだインポートされていないと思います@ vincent-ledu

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

Subhojit1992 picture Subhojit1992  ·  3コメント

gizm0bill picture gizm0bill  ·  4コメント

alexweber picture alexweber  ·  4コメント

PeterSisovsky picture PeterSisovsky  ·  3コメント

Halynsky picture Halynsky  ·  3コメント