Angular-google-maps: Ошибка ленивых карт-API-загрузчика

Созданный на 4 мая 2016  ·  19Комментарии  ·  Источник: SebastianM/angular-google-maps

Привет @SebastianM!

Я использую angular2-google-maps в ionic2 / angular2, в котором нам нужна карта только на одной странице, и она тоже работает нормально, но каждое последующее посещение одной и той же страницы дает мне ошибку.

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

Пожалуйста, дайте мне знать, если я что-то упустил.

Спасибо

discussion / question

Самый полезный комментарий

В вашем импорте app.module.ts добавьте:

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

(конечно, вы можете удалить библиотеки: ['places'])

а затем в общем модуле добавьте:
в импорте
AgmCoreModule
и в экспорте:
AgmCoreModule

затем
You have included the Google Maps API multiple times on this page. This may cause unexpected errors. исчезнет

Все 19 Комментарий

Он @ravindranpandu ,

вы сами загружаете скрипт карт Google в любое место на странице?

Нет, я просто импортирую его в файл машинописного текста, каждый раз, когда я посещаю эту страницу, к html добавляется тег сценария, который ссылается на API googlemap.

index_html

На прикрепленном выше изображении вы можете видеть, что тег скрипта 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, теперь он работает, как ожидалось, спасибо за ваше время.

Это также происходит, когда я использую angular2-google-maps в функциональном модуле вместо корневого модуля приложения. Кто-нибудь может подтвердить?

В вашем импорте app.module.ts добавьте:

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

(конечно, вы можете удалить библиотеки: ['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 включите api

// 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 maps и запрашивать javascript только один раз. Я сделал это с помощью webpack 2, и он отлично работает. Спасибо, ребята, за хорошую работу.

@IAMtheIAM спасибо. Мои поздравления и @efstathiosntonas 🥇

если вы снова вызываете его где-то в индексном файле или где-то еще, вы должны удалить его.
вам нужно вызвать его только один раз в своем проекте.

Привет, ребята, кто-нибудь знает, как найти место, куда я включил карты второй раз?
Если на первой странице, которую я посещаю, есть карта, я ее не вижу. Но если страница с картой, которую я посещаю, не первая, ничего страшного.
Спасибо

Без образца кода вам будет сложно помочь @Riasets

Ссылка репо: https://github.com/Riasets/test
Извините за дерьмовый код
@IAMtheIAM

логин: [email protected]
пароль: test1234

@Riasets Я клонировал ваше приложение и запустил его, выглядит очень хорошо. Для меня после входа в систему карта сразу загружается, и если я перехожу на любую другую страницу, карта также загружается нормально. Я не вижу проблем, не могли бы вы уточнить?

Страница входа

Была ли эта страница полезной?
0 / 5 - 0 рейтинги