Angular-google-maps: Anda telah menyertakan Google Maps API beberapa kali di halaman ini
Saya tahu masalah ini terjadi pada orang lain tetapi saya cukup terjebak dengannya sejak berhari-hari, tidak dapat menemukan solusi apa pun.
Ini @NgModule saya :
import { NgModule } from '@angular/core';
import { AgmCoreModule } from 'angular2-google-maps/core/index';
// Global vars
import appGlobals = require('./../globals');
@NgModule({
imports: [ AgmCoreModule.forRoot({
apiKey: appGlobals.googleMapsApiKey
}) ],
})
export class JobSearchModule {}
Ini HTML saya:
<div class="col-md-12 google-maps-container">
<sebm-google-map [latitude]="mapLat"
[longitude]="mapLng"
[mapDraggable]="false"
[zoom]="zoom"
[zoomControl]="false"
[streetViewControl]="false"
(mapClick)="mapClicked($event)">
<sebm-google-map-marker [latitude]="mapLat"
[longitude]="mapLng">
</sebm-google-map-marker>
</sebm-google-map>
</div>
Dan ini adalah tangkapan layar dari apa yang saya miliki di dalam tag kepala HTML saya:
Jadi sepertinya itu benar-benar termasuk API dua kali tetapi saya tidak tahu mengapa atau bagaimana.
escarabin
Semua 19 komentar
@escarabin masalahnya adalah Anda mengimpor modul dalam modul anak aplikasi Anda. Anda harus mengimpornya di dalam modul root aplikasi Anda. Menutup ini karena ini bukan bug. Jangan ragu untuk membuka kembali. Terima kasih!
SebastianM
pada 21 Okt 2016
hai @SebastianM! Terima kasih atas sarannya tetapi saya masih menghadapi masalah ini.
Ini konfigurasi saya:
- Saya perlu menggunakan angular2-google-maps dalam modul anak yang disebut
job-search-module.ts - Saya memiliki
shared.module.tsyang berisi semua komponen dan modul yang saya gunakan di beberapa modul lainnya. - Modul root saya adalah
app.module.ts
Sekarang, ketika saya mengimpor AgmCoreModule di app.module.ts saya, saya melihat kesalahan yang mengatakan bahwa sebm-google-map bukan bagian dari job-search-module.ts saya dan tidak ada peta yang ditampilkan.
Ketika saya mengimpor AgmCoreModule baik di shared.module.ts atau di job-search.module.ts , saya melihat _"Anda telah menyertakan Google Maps API beberapa kali di halaman ini"_.
Apa yang harus saya lakukan?
PS: Saya tidak memiliki kemampuan untuk membuka kembali masalah
escarabin
pada 26 Okt 2016
siapa pun? :( Saya cukup terjebak dengan itu sekarang
escarabin
pada 31 Okt 2016
@escarabin saya punya masalah yang sama. Coba ini.
Anda perlu mengimpor peta di modul aplikasi root, jadi Anda melakukan sesuatu seperti ini:
@NgModule({
declarations: [
...
],
imports: [
...,
AgmCoreModule.forRoot({
apiKey: 'some key here'
})
],
Tetapi kemudian jika Anda ingin menggunakan peta dalam komponen yang bukan milik modul ini, buka modul itu dan lakukan ini:
@NgModule({
declarations: [
SomeComponentThatHasMapsInItsHtml,
.....
],
imports: [
AgmCoreModule,
...
],
EddyP23
pada 3 Nov 2016
Untuk menambahkan mengapa saya pikir ini berhasil, adalah karena Anda perlu mendaftarkan hal itu di root aplikasi Anda (sehingga barang-barang google diinisialisasi dengan kunci Anda).
Tetapi Anda menggunakan <seb-maps-smth-smth> dalam komponen yang dimiliki modul lain, jadi Anda perlu menambahkan AgmCoreModule sebagai impor sehingga dapat menemukan komponen yang diekspor dalam modul ini yang memiliki pemilih seb-maps-smth-smth .
Semoga itu menyelesaikan masalah
EddyP23
pada 3 Nov 2016
Terima kasih banyak atas usahanya @EddyP23 tapi sayangnya saya masih melihat kesalahannya...apakah ini benar-benar bekerja di pihak Anda menggunakan [email protected] ? Ini sangat aneh.
Masalahnya bukan kesalahan itu sendiri tetapi juga menyebabkan banyak bug yang benar-benar acak pada halaman...
Juga, Anda berbicara tentang <seb-maps-smth-smth> . Saya tidak menggunakan tag ini dan saya tidak melihatnya di dokumen. Saya menggunakan <sebm-google-map>
escarabin
pada 4 Nov 2016
@escarabin Ya, saya menggunakan versi 0.15.0.
Dengan smth smth yang saya maksud adalah pemilih seb-maps-{placeholder} apa pun. HTML saya terlihat seperti:
<sebm-google-map #sebmGoogleMap
[latitude]="myVar1"
[longitude]="myVar2"
(idle)='onIdle()'
[zoom]='mapZoomLevel'
[streetViewControl]='false'
>
<sebm-google-map-marker #marker
[latitude]="myVar3"
[longitude]="myVar4"
></sebm-google-map-marker>
</sebm-google-map>
Kesalahan apa yang Anda lihat sekarang? Saya percaya pengaturan ini harus bekerja. Bisakah Anda membagikan lebih banyak kode?
EddyP23
pada 4 Nov 2016
Saya masih melihat kesalahan "Anda telah menyertakan Google Maps API beberapa kali di halaman ini".
HTML saya terlihat seperti ini:
<sebm-google-map #sebmGoogleMap
[latitude]="mapLat"
[longitude]="mapLng"
[mapDraggable]="false"
[zoom]="zoom"
[zoomControl]="false"
[streetViewControl]="false"
(mapClick)="mapClicked($event)">
<sebm-google-map-marker [latitude]="mapLat"
[longitude]="mapLng">
</sebm-google-map-marker>
</sebm-google-map>
Ini modul anak saya:
import { NgModule } from '@angular/core';
import { jobSearchRouting } from './job-search.routes';
import { SharedModule } from './../shared/shared.module';
import { AgmCoreModule } from 'angular2-google-maps/core/index';
// Components
import { SearchComponent } from './components/search.component';
@NgModule({
declarations: [ SearchComponent ],
imports: [ jobSearchRouting,
AgmCoreModule,
SharedModule ]
})
export class JobSearchModule {}
dan app.module.ts saya @NgModule :
@NgModule({
declarations: [ AppComponent,
HomeComponent,
HeaderComponent,
FooterComponent,
PostComponent,
ClubComponent,
CandidateSignUpComponent,
PostPreviewComponent,
SignInComponent,
ProfileSubHeaderComponent,
RecruiterPromoComponent,
NotificationsComponent ],
imports: [ RouterModule,
HttpModule,
SharedModule,
BrowserModule,
AgmCoreModule.forRoot({
apiKey: appGlobals.googleMapsApiKey
}),
MetaModule.forRoot(metaConfig),
routing ],
providers: [ NotificationsService,
MetaService ],
bootstrap: [ AppComponent ],
})
Hm.. Aneh. Apakah Anda yakin tidak memiliki tag skrip yang mengimpor peta google di mana saja (misalnya di index.html ) dengan cara lama? Sesuatu seperti ini:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Saya juga akan memeriksa semua penggunaan AgmCoreModule untuk memeriksa bahwa Anda tidak mengimpornya dua kali di tempat lain secara tidak sengaja.
EddyP23
pada 4 Nov 2016
Saya juga mengalami masalah ini. Saya telah menambahkan AgmCoreModule.forRoot({...}) di app.module untuk komponen saya, dan saya telah memeriksa beberapa panggilan google api.
Masih mengembalikan kesalahan yang sama.
onocy
pada 13 Jul 2017
Saya juga mengalami masalah ini. Saya juga telah menambahkan AgmCoreModule.forRoot({...}) di app.module untuk komponen saya, dan saya juga telah memeriksa beberapa panggilan google api.
jasperSpeicher
pada 14 Jul 2017
Oke kesalahan saya, jika itu membantu orang lain di sini--coba hapus tag skrip lama Anda daripada mengomentarinya. Untuk beberapa alasan, mengomentarinya di template tidak menghapusnya.
jasperSpeicher
pada 15 Jul 2017
@EddyP23 , Apa yang dapat saya lakukan jika saya menggunakan skd autocomplete dan agm maps?
Karena diimpor ke dalam indeks
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
gerajc
pada 15 Jul 2017
Sayangnya saya tidak dapat just delete your old script tag karena kami memiliki beberapa bagian lama dari aplikasi kami yang memerlukan tag skrip. Saya menyarankan pemuat malas memeriksa apakah api lib ada terlebih dahulu sebelum mengambil. Saya agak buntu sekarang dan mungkin harus mengedit sumbernya.
agillesp
pada 2 Agu 2017
Di bawah ini adalah peretasan saya yang cukup buruk untuk memungkinkan a) dependensi lama yang menganggap api disertakan secara statis melalui tag <script src="" hardcoded tetap berfungsi dan b) menghindari kesalahan You have included the Google Maps API multiple times on this page .
Terapkan Override
import { ModuleWithProviders } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { MapsAPILoader } from '@agm/core/services/maps-api-loader/maps-api-loader';
import { LazyMapsAPILoaderConfigLiteral } from '@agm/core/services/maps-api-loader/lazy-maps-api-loader';
export class AgmCoreOverrideModule {
static forRoot(lazyMapsAPILoaderConfig?: LazyMapsAPILoaderConfigLiteral): ModuleWithProviders {
var module = AgmCoreModule.forRoot(lazyMapsAPILoaderConfig);
// This is the magical path to what we need to override.
// Future releases of Agm Core may totally break this.
let provider: any = module.providers[2];
provider.useClass = IgnoreIncludingApiLoader;
return module;
}
}
export class IgnoreIncludingApiLoader extends MapsAPILoader {
load(): Promise<void> {
// Do absolutely nothing.
return new Promise<void>(resolve => resolve());
}
}
Hubungkan di app.module
@NgModule({
imports: [
AgmCoreOverrideModule.forRoot({
apiKey: '<key>' // Not really needed.
})
],
...
Saya telah mencoba menyelesaikan masalah ini dari beberapa hari, akhirnya saya sampai pada solusi dengan membandingkan semua file modul dalam proyek.
Silakan periksa semua modul dalam paket Anda.
Jika Anda menemukan kode di bawah ini di beberapa modul, hapus dan simpan hanya dalam satu modul.
<br i="8"/>
platformBrowserDynamic().bootstrapModule(AppModule)<br i="9"/>
.catch(err => console.log(err));<br i="10"/>
Lebih baik menyimpan hanya di main.ts
Semoga solusi ini membantu kalian
niketjsh
pada 1 Feb 2018
Saya dapat menyelesaikan masalah dalam escenario yang dijelaskan oleh @escarabin dengan mengganti modul.
import { ModuleWithProviders, Inject, Optional, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AgmCoreModule, LAZY_MAPS_API_CONFIG, MapsAPILoader } from '@agm/core';
import { LazyMapsAPILoader, LazyMapsAPILoaderConfigLiteral } from '@agm/core/services/maps-api-loader/lazy-maps-api-loader';
import { WindowRef, DocumentRef, BROWSER_GLOBALS_PROVIDERS } from '@agm/core/utils/browser-globals';
@NgModule({ imports: [CommonModule, AgmCoreModule], exports: [AgmCoreModule]})
export class AgmOverrideModule {
static forRoot(lazyMapsAPILoaderConfig?: LazyMapsAPILoaderConfigLiteral): ModuleWithProviders {
return {
ngModule: AgmOverrideModule, providers: [BROWSER_GLOBALS_PROVIDERS, { provide: MapsAPILoader, useClass: ApiLoader },
{ provide: LAZY_MAPS_API_CONFIG, useValue: lazyMapsAPILoaderConfig } ]}
}
}
export class ApiLoader extends LazyMapsAPILoader {
private static cargado: boolean;
constructor( @Optional() @Inject(LAZY_MAPS_API_CONFIG) config: any, @Inject(WindowRef) w: WindowRef, @Inject(DocumentRef) d: DocumentRef) {
super(config, w, d);
}
load(): Promise<void> {
if (ApiLoader.cargado) {
return new Promise<void>(resolve => resolve());
} else {
return new Promise<void>((resolve, reject) => {
super.load()
.then(() => {
ApiLoader.cargado = true;
resolve();
})
.catch(err => {
reject(err);
});
});
}
}
}
Dan mengimpor modul dalam modul bersama
@NgModule({
imports: [
...
AgmOverrideModule.forRoot({
apiKey: environment.claveMaps
}),
...
export class ComunModule
Dan dalam modul yang dimuat malas
```
@NgModule({
impor: [
ComunModul,
AgmOverrideModul,
...
]
Juliete
pada 19 Mar 2018
Terima kasih banyak:).
Pada Senin, 19 Maret 2018 pukul 19:03, Juliete notifications@github.com menulis:
Saya dapat menyelesaikan masalah dalam escenario yang @escarabin
https://github.com/escarabin menjelaskan penggantian modul.import { ModuleWithProviders, Inject, Optional, NgModule } from '@angular/core';
impor { CommonModule } dari '@angular/common';
impor { AgmCoreModule, LAZY_MAPS_API_CONFIG, MapsAPILoader } dari '@agm/core';
impor { LazyMapsAPILoader, LazyMapsAPILoaderConfigLiteral } dari '@agm/core/services/maps-api-loader/lazy-maps-api-loader';
impor { WindowRef, DocumentRef, BROWSER_GLOBALS_PROVIDERS } dari '@agm/core/utils/browser-globals';
impor { coreDirectives } dari '@agm/core/core.module';@NgModule({ impor: [CommonModule, AgmCoreModule], ekspor: [AgmCoreModule]})
kelas ekspor AgmOverrideModule {
static forRoot(lazyMapsAPILoaderConfig?: LazyMapsAPILoaderConfigLiteral): ModuleWithProviders {
kembali {
ngModule: AgmOverrideModule, penyedia: [BROWSER_GLOBALS_PROVIDERS, { sediakan: MapsAPILoader, useClass: ApiLoader },
{ berikan: LAZY_MAPS_API_CONFIG, useValue: lazyMapsAPILoaderConfig } ]}
}
}kelas ekspor ApiLoader memperluas LazyMapsAPILoader {
kargo statis pribadi: boolean;
konstruktor( @Optional() @Inject(LAZY_MAPS_API_CONFIG) config: any, @Inject(WindowRef) w: WindowRef, @Inject(DocumentRef) d: DocumentRef) {
super(konfigurasi, w, d);}
beban(): Janji{
if (ApiLoader.cargado) {
kembalikan Janji baru(menyelesaikan => menyelesaikan());
} lain {
kembalikan Janji baru((menyelesaikan, menolak) => {
super.load()
.kemudian(() => {
ApiLoader.cargado = benar;
menyelesaikan();
})
.catch(err => {
tolak(err);
});
});
}
}
}Dan mengimpor modul dalam modul bersama
AgmOverrideModule.forRoot({ apiKey: environment.claveMaps }),—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub
https://github.com/SebastianM/angular-google-maps/issues/692#issuecomment-374212677 ,
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AiXUoVhigXAsP1d3tYQsPwK8UP_T-lfXks5tf7OkgaJpZM4KMHK6
.
niketjsh
pada 20 Mar 2018
Saya juga memiliki masalah dengan perpustakaan versi 1.0.0-beta.5. Saya menyelidiki masalahnya dan itu tidak terjadi di setiap kasus.
Inilah konteksnya, saya memiliki modul utama yang menggunakan AgmCoreModule.forRoot :
@NgModule({
imports: [
(...)
AgmCoreModule.forRoot({
apiKey: environment.googleMaps.apiKey
}),
dan modul malas yang menggunakan AgmCoreModule :
@NgModule({
declarations: [
(...)
],
imports: [
(...)
AgmCoreModule,
Saya dapat mereproduksi masalah ketika pertama kali membuka halaman yang ditautkan ke modul root dan kemudian membuka halaman modul lay. Jika saya langsung membuka halaman di dalam modul malas, saya tidak punya masalah ...
Saya menyelidiki sedikit masalahnya dan saya menemukan bahwa metode load dari LayLoader agm dipanggil dua kali dalam kasus ini secara paralel:
- satu dari
FitBoundsService
function FitBoundsService(loader) {
var _this = this;
this._boundsChangeSampleTime$ = new BehaviorSubject(200);
this._includeInBounds$ = new BehaviorSubject(new Map());
this.bounds$ = from(loader.load()).pipe(flatMap(function () { return _this._includeInBounds$; }), sample(this._boundsChangeSampleTime$.pipe(switchMap(function (time) { return timer(0, time); }))), map(function (includeInBounds) { return _this._generateBounds(includeInBounds); }), shareReplay(1));
}
- satu dari
GoogleMapsAPIWrapper
GoogleMapsAPIWrapper.prototype.createMap = function (el, mapOptions) {
var _this = this;
return this._zone.runOutsideAngular(function () {
return _this._loader.load().then(function () {
var map = new google.maps.Map(el, mapOptions);
_this._mapResolver(map);
return;
});
});
};
Apakah Anda punya ide tentang cara memperbaiki masalah ini?
Terima kasih!
templth
pada 1 Okt 2018
Masalah terkait
marcelinobadin
·
3Komentar
gnujeremie
·
3Komentar
ostapch
·
4Komentar
matishw
·
3Komentar
dineshkumar20
·
3Komentar
Komentar yang paling membantu
@escarabin saya punya masalah yang sama. Coba ini.
Anda perlu mengimpor peta di modul aplikasi root, jadi Anda melakukan sesuatu seperti ini:
Tetapi kemudian jika Anda ingin menggunakan peta dalam komponen yang bukan milik modul ini, buka modul itu dan lakukan ini: