使用 angular-map 包在 Angular 6 中集成 Bingmap

Question

我想实现bingmap在角6使用“角图” NPM包，我已经请参考也被称为 问题陈述：在node_modules没有创建“bingmaps”文件夹

app.module.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';

错误：

./node_modules/angular-maps/fesm5/angular-maps.js 中的错误模块未找到：错误：无法解析 'D:\bingmap\bingmap\node_modules\angular-maps\fesm5' 中的 'bingmaps' i ?wdm ?: 编译失败。src/app/app.module.ts(1,23) 中的错误：错误 TS6053：文件 'D:/bingmap/bingmap/src/app/node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All.d.ts ' 未找到。

也安装了 npm install --save @types/bingmaps

Answer 1

我刚刚在本地和 stackblitz 上进行了测试，并意识到您必须安装一些库依赖项才能使 angular-maps 工作。我收到了和你一样的错误，但是一旦我安装了库，错误就消失了。

你的 package.json 应该包含这些库：

"@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", 

所以你需要安装它们

npm install --save angular-maps
npm install --save bingmaps
npm install --save @types/bingmaps
npm install --save async@2.5.0
npm install --save json-loader

我在 index.html 中包含了 font-awesome 作为外部链接：

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

在 app.module.ts 上包括这个以及在 app.component.ts 上：

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

如果您还检查stackblitz，您可以看到使用了哪些额外库的依赖项