Angular-google-maps: Snazzy-Infofenster wird nicht angezeigt

Erstellt am 27. Nov. 2017  ·  4Kommentare  ·  Quelle: SebastianM/angular-google-maps

Ich verwende den folgenden Code, um ein schickes Infofenster anzuzeigen

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

Aber selbst wenn ich auf das Marker-Info-Fenster klicke, wird es nicht angezeigt. Auch standardmäßig, wenn ich es direkt in die Karte stecke, wird es immer noch nicht angezeigt. Bitte lassen Sie mich wissen, wenn ich hier etwas falsch mache.

Ich verwende die folgenden Pakete

AGM/Core: "^1.0.0-beta.2",
agm/snazzy-Info-Fenster: "^1.0.0-beta.2",
Winkel/Kern: "^4.4.6"
schickes Info-Fenster: "^1.1.0"

Hilfreichster Kommentar

Für mich gelöst!
Beim Neustart von ng serve wird .angular-cli.json neu geladen und somit CSS-Dateien geladen.

Infofenster wird jetzt in der Karte gerendert!

hoffe das löst auch dein problem.
(4 Stunden für diese Fehler, für einen Neustart !!!)

Alle 4 Kommentare

Hallo,
Ich habe das gleiche Problem, aber ich bemerke ein kleines X und den Inhalt in der oberen linken Ecke der Karte (siehe Anhang).
Wahrscheinlich ein Problem mit dem CSS-Stil.
mein Code:

<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, Stildeklarationen:

      "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"
      ],

Abhängigkeiten:

"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

Für mich gelöst!
Beim Neustart von ng serve wird .angular-cli.json neu geladen und somit CSS-Dateien geladen.

Infofenster wird jetzt in der Karte gerendert!

hoffe das löst auch dein problem.
(4 Stunden für diese Fehler, für einen Neustart !!!)

Dies ist ein Support-Problem, das keinen Fehler oder eine konkrete Feature-Anfrage darstellt, daher schließe ich dieses Problem. Fühlen Sie sich frei, unten zu chatten oder den offiziellen Chatroom auf Gitter zu nutzen: https://gitter.im/SebastianM/angular2-google-maps

ich denke css von @agm/snazzy-info-window noch nicht importieren @vincent-ledu

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

matishw picture matishw  ·  3Kommentare

ostapch picture ostapch  ·  4Kommentare

ChrisDevinePimss picture ChrisDevinePimss  ·  3Kommentare

muhammad-shahzad-anjum picture muhammad-shahzad-anjum  ·  4Kommentare

marcelinobadin picture marcelinobadin  ·  3Kommentare