Привет @SebastianM!
Я использую angular2-google-maps в ionic2 / angular2, в котором нам нужна карта только на одной странице, и она тоже работает нормально, но каждое последующее посещение одной и той же страницы дает мне ошибку.
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
Пожалуйста, дайте мне знать, если я что-то упустил.
Спасибо
Он @ravindranpandu ,
вы сами загружаете скрипт карт Google в любое место на странице?
Нет, я просто импортирую его в файл машинописного текста, каждый раз, когда я посещаю эту страницу, к html добавляется тег сценария, который ссылается на API 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, теперь он работает, как ожидалось, спасибо за ваше время.
Это также происходит, когда я использую 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 Я клонировал ваше приложение и запустил его, выглядит очень хорошо. Для меня после входа в систему карта сразу загружается, и если я перехожу на любую другую страницу, карта также загружается нормально. Я не вижу проблем, не могли бы вы уточнить?
Страница входа
Самый полезный комментарий
В вашем импорте 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.
исчезнет