Question

在尝试将google maps集成到我的应用程序时，我遵循了https://angular-maps.com/guides/getting-started/上的指南，但目前似乎不起作用。地图未加载，控制台上没有错误消息

.yo-rc.json

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.sample"
    },
    "jhipsterVersion": "4.14.4",
    "baseName": "JhipsterExercise",
    "packageName": "com.sample",
    "packageFolder": "com/sample",
    "serverPort": "8080",
    "authenticationType": "session",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": "elasticsearch",
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "gradle",
    "enableSocialSignIn": true,
    "enableSwaggerCodegen": false,
    "rememberMeKey": "db5d503363a3ec42c3fa113a44bf41b4ae63a29c",
    "clientFramework": "angularX",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [
      "gatling",
      "protractor"
    ],
    "jhiPrefix": "jhi",
    "enableTranslation": false
  }
}

已安装agm

yarn add @agm/core

将脚本导入vendor.ts

import '../content/css/vendor.css';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
import '@agm/core'

编辑我执行的文件后

yarn run webpack:build

app.module.ts

import './vendor.ts';

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { Ng2Webstorage } from 'ngx-webstorage';
import { JhiEventManager } from 'ng-jhipster';

import { AuthExpiredInterceptor } from './blocks/interceptor/auth-expired.interceptor';
import { ErrorHandlerInterceptor } from './blocks/interceptor/errorhandler.interceptor';
import { NotificationInterceptor } from './blocks/interceptor/notification.interceptor';
import { JhipsterExerciseSharedModule, UserRouteAccessService } from './shared';
import { JhipsterExerciseAppRoutingModule} from './app-routing.module';
import { JhipsterExerciseHomeModule } from './home/home.module';
import { JhipsterExerciseAdminModule } from './admin/admin.module';
import { JhipsterExerciseAccountModule } from './account/account.module';
import { JhipsterExerciseEntityModule } from './entities/entity.module';
import { PaginationConfig } from './blocks/config/uib-pagination.config';
import { StateStorageService } from './shared/auth/state-storage.service';
import { AgmCoreModule } from '@agm/core';
// jhipster-needle-angular-add-module-import JHipster will add new module here
import {
    JhiMainComponent,
    NavbarComponent,
    FooterComponent,
    ProfileService,
    PageRibbonComponent,
    ErrorComponent
} from './layouts';

@NgModule({
    imports: [
        BrowserModule,
        JhipsterExerciseAppRoutingModule,
        Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}),
        JhipsterExerciseSharedModule,
        JhipsterExerciseHomeModule,
        JhipsterExerciseAdminModule,
        JhipsterExerciseAccountModule,
        JhipsterExerciseEntityModule,
        AgmCoreModule.forRoot({
            apiKey: 'THE-KEY-HERE'
        }),
        // jhipster-needle-angular-add-module JHipster will add new module here
    ],
    declarations: [
        JhiMainComponent,
        NavbarComponent,
        ErrorComponent,
        PageRibbonComponent,
        FooterComponent
    ],
    providers: [
        ProfileService,
        PaginationConfig,
        UserRouteAccessService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthExpiredInterceptor,
            multi: true,
            deps: [
                StateStorageService,
                Injector
            ]
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: ErrorHandlerInterceptor,
            multi: true,
            deps: [
                JhiEventManager
            ]
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: NotificationInterceptor,
            multi: true,
            deps: [
                Injector
            ]
        }
    ],
    bootstrap: [ JhiMainComponent ]
})
export class JhipsterExerciseAppModule {}

export class HomeComponent implements OnInit {
    account: Account;
    modalRef: NgbModalRef;

    lat = 51.678418; // the lat 
    lng = 7.809007; // the lon

    ....

这是home.component.html

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

home.css

agm-map {
    height: 300px;
}

Answer 1

我终于能够解决该问题，好像该库是在根模块上添加的

app.module.ts

然后以某种方式无法在子模块级别正确拾取它，所以我将其添加到目标模块，一切正常

无法将Angular Google Maps（AGM）添加到Jhipster

1 个答案: