Angular-google-maps: خطأ في تحميل الخرائط الكسولة API

هو ravindranpandu ،

هل تقوم بتحميل سكربت خرائط جوجل بنفسك في أي مكان على الصفحة؟

لا ، أنا فقط أستورده إلى ملف الكتابة المطبوعة ، في كل مرة أزور فيها تلك الصفحة ، يتم إلحاق علامة البرنامج النصي بـ html الذي يرتبط بواجهة برمجة تطبيقات googlemap.

في الصورة المرفقة أعلاه ، يمكنك رؤية علامة برنامج googlemap النصي مُلحقة 7 مرات ، مما يعني أنني زرت الصفحة 7 مرات.

ravindranpandu هممم ، هل يمكنك أن تريني دالة bootstrap() ؟

مرحبًا SebastianM ،

لتسهيل الأمر ، قمت بإنشاء نموذج تطبيق ، يمكنك رؤية المشكلة في هذا التطبيق الأيوني.
https://github.com/ravindranpandu/angular-map

شكرا مقدما

حاول زيارة صفحة الخريطة أكثر من مرة ، ستحصل على المشكلة التي كنت أتحدث عنها.

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

لست متأكدًا من سبب حدوث ذلك ، يرجى إعلامي بما يمكن أن يكون خطأ؟

شكرا

ravindranpandu هذا الخط هو السبب:
https://github.com/ravindranpandu/angular-map/blob/master/app/pages/map/map.ts#L14

يمكنك إنشاء مثيلات متعددة لمحمل الخرائط عندما تقوم بتضمين ANGULAR2_GOOGLE_MAPS_PROVIDERS في هذا المكان.

يجب عليك استخدام ANGULAR2_GOOGLE_MAPS_PROVIDERS في طريقة bootstrap ().

لقد بدأتSebastianM الآن في تهيئة ANGULAR2_GOOGLE_MAPS_PROVIDERS في مزود app.ts الرئيسي ، وهي تعمل الآن كما هو متوقع ، شكرًا على وقتك.

يبدو أن هذا يحدث أيضًا عندما أستخدم خرائط google-angular2 في وحدة ميزة بدلاً من وحدة تطبيق الجذر. يمكن لأي شخص أن يؤكد؟

في استيراد app.module.ts الخاص بك ، أضف:

AgmCoreModule.forRoot({ apiKey: 'xxxxxx', libraries: ['places'] })

(بالطبع يمكنك إزالة المكتبات: ['الأماكن'])

ثم في وحدة مشتركة أضف:
في الواردات
AgmCoreModule
وفي الصادرات:
AgmCoreModule

ثم
سيذهب You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

يا رفاق ، أي شخص يعرف كيف نعمل الآن مع التحميل البطيء؟
تم إهمال GOOGLE_MAPS_PROVIDERS ونستخدم AgmCoreModule بدلاً من ذلك والذي يتم تحميله في كل مرة يتم فيها تحميل مكتبات API عند تحميل وحدة.

szykov الحل لاستخدام هذا المكون angular2 في وحدة فرعية محملة كسول هو القيام بما قاله efstathiosntonas

أولاً ، قم بتضمين واجهة برمجة التطبيقات في app.module.ts

// app.module.ts
import { AgmCoreModule } from 'angular2-google-maps/core';

//other stuff here

@NgModule({
   bootstrap: [AppComponent],
   declarations: [ //  declarations contains: components, directives and pipes],
   imports: [ // import other modules here
        AgmCoreModule.forRoot({
            apiKey: 'YOUR_KEY'
       })],
   providers: [ // expose our Services and Providers into Angular's dependency injection]
})

ثم داخل الوحدة الفرعية الخاصة بك ، قم بتضمينها مرة أخرى ولكن بدون مفتاح API

// maps.module.ts (submodule)
import { AgmCoreModule } from 'angular2-google-maps/core';

// other stuff

@NgModule({
   imports: [ // other imports here
      AgmCoreModule
   ],
   declarations: [ // Components / Directives / Pipes
      MapComponent
   ]
})

الآن سيتم تحميل مكون خرائط angular2 بشكل كسول وسيطلب جافا سكريبت مرة واحدة فقط. لقد فعلت ذلك باستخدام webpack 2 وهو يعمل بشكل جيد. شكرا يا رفاق على العمل الجيد هنا.

IAMtheIAM شكرا. تحياتي إلى efstathiosntonas أيضًا 🥇

إذا كنت تتصل به مرة أخرى في مكان ما في ملف الفهرس أو في مكان آخر ، فعليك إزالته.
تحتاج إلى تسميته مرة واحدة فقط في مشروعك.

مرحبًا يا رفاق ، هل من أحد يعرف كيفية العثور على مكان قمت فيه بتضمين الخرائط للمرة الثانية؟
إذا كانت الصفحة الأولى التي أزورها تحتوي على خريطة ، فلا يمكنني رؤيتها. ولكن إذا لم تكن الصفحة التي تحتوي على خريطة أزورها أولاً ، فلا بأس بذلك.
شكرا

بدون نموذج رمز ، سيكون من الصعب مساعدتك Riasets

رابط الريبو: https://github.com/Riasets/test
آسف لرمز غذر
تضمين التغريدة

تسجيل الدخول: [email protected]
كلمة المرور: test1234

Riasets لقد قمت باستنساخ تطبيقك

IAMtheIAM كانت صفحة تسجيل الدخول الأولى وكانت صفحة الخريطة ثانية. في هذه الحالة تحميل الخريطة. ولكن إذا سمحت بالفعل وحاولت الذهاب إلى / الصفحة الرئيسية ، على سبيل المثال ، فلن يتم تحميل الخريطة. أو حاول إعادة تحميل الصفحة بالخريطة ، فلن يتم تحميلها أيضًا. ويمكنك أيضًا أن ترى في أدوات dev 2 نفس البرامج النصية باستخدام خرائط Google