typescript - Bingmap-integrasjon i Angular 6 ved bruk av angular-map-pakken

Jeg prøver å implementere Bing Maps i Angular 6 ved å bruke "angular-map" npm-pakker. For dette har jeg også referert til problemstillingen: det er ikke opprettet en "bingmaps"-mappe i node_modules.

app.modul.ts

/// <reference path="node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts" />
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MapModule, MapAPILoader, BingMapAPILoaderConfig, BingMapAPILoader, WindowRef, DocumentRef, MapServiceFactory, BingMapServiceFactory } from "angular-maps";
import { AppComponent } from './app.component';

feil :

FEIL i ./node_modules/angular-maps/fesm5/angular-maps.js Modul ikke funnet: Feil: Kan ikke finne 'bingmaps' i 'D:\bingmap\bingmap\node_modules\angular-maps\fesm5' i (wdm): Klarte ikke å kompilere. FEIL i src/app/app.module.ts(1,23): feil TS6053: Fil 'D:/bingmap/bingmap/src/app/node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts' ikke funnet.

også installert npm install --save @types/bingmaps

Svar #1

Jeg testet nettopp begge lokalt og på Stackblitz og innså at det finnes noen biblioteksavhengigheter du må installere for å få angular-maps til å fungere. Jeg fikk samme feilmelding som deg, men når jeg installerte bibliotekene, forsvant feilen.

Din package.json bør inneholde disse bibliotekene:

"@types/bingmaps": "0.0.1",
"angular-maps": "^6.0.1",
"async": "^2.5.0",
"bingmaps": "^2.0.3",
"core-js": "^2.5.4",
"font-awesome": "^4.6.3",
"json-loader": "^0.5.7",

så du trenger å installere dem

npm install --save angular-maps
npm install --save bingmaps
npm install --save @types/bingmaps
npm install --save [email 
npm install --save json-loader

Jeg inkluderte font-awesome som ekstern lenke i index.html:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

På app.module.ts inkluder dette i tillegg på app.component.ts:

import {
    MapModule,
    MapAPILoader,
    MarkerTypeId,
    IMapOptions,
    IBox,
    IMarkerIconInfo,
    WindowRef,
    DocumentRef,
    MapServiceFactory,
    BingMapAPILoaderConfig,
    BingMapAPILoader,
    GoogleMapAPILoader,
    GoogleMapAPILoaderConfig
} from 'angular-maps';

Hvis du også sjekker på Stackblitz, kan du se i avhengigheter hvilke ekstra biblioteker som brukes

Relaterte artikler