أنا أستخدم الكود أدناه لإظهار نافذة المعلومات الأنيقة
<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"
نافذة معلومات snazzy: "^ 1.1.0"
مرحبا،
لدي نفس المشكلة ، لكنني لاحظت وجود علامة X صغيرة والمحتوى في الزاوية اليسرى العليا من الخريطة (انظر المرفق).
ربما مشكلة في أسلوب المغلق.
رمز بلدي :
<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 { }
.
"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"
},
حل بالنسبة لي!
تؤدي إعادة تشغيل ng إلى إعادة تحميل.
يتم عرض infowindow الآن في الخريطة!
آمل أن تحل مشكلتك أيضًا.
(4 ساعات على تلك الحشرات ، لإعادة التشغيل !!!)
هذه مشكلة دعم لا تمثل خطأ أو طلب ميزة ملموسة ، لذلك أغلق هذه المشكلة. لا تتردد في الدردشة أدناه أو استخدام غرفة الدردشة الرسمية على Gitter: https://gitter.im/SebastianM/angular2-google-maps
أعتقد أن css من @ agm / snazzy-info-window ليس للاستيراد بعد @ vincent-ledu
التعليق الأكثر فائدة
حل بالنسبة لي!
تؤدي إعادة تشغيل ng إلى إعادة تحميل.
يتم عرض infowindow الآن في الخريطة!
آمل أن تحل مشكلتك أيضًا.
(4 ساعات على تلك الحشرات ، لإعادة التشغيل !!!)