时间戳

首页 > 解决方案 > node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.d.ts' 不是模块

angular - node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.d.ts' 不是模块

问题描述

我正在使用 angular 7 (cli) 的官方 npm bingmaps。

我添加了 npm 文档中提到的完成配置，
我目前正在加载基本的 bing 地图。
在我的 component.ts 文件中，我添加了以下行，因为如果不使用此行，编译器会给出错误（未定义“Microsoft”）

import { } from '../../../../../../node_modules/bingmaps/types/MicrosoftMaps/Microsoft.Maps.All';

现在，当我编译代码时，我收到另一个错误，因为Microsoft.Maps.All 不是模块。
对此有任何想法吗？这是与角度 CLI 相关的问题吗？我也提到了下面的链接，但没有得到他们想说的。
git链接

标签： angularangular-clibing-maps

解决方案

您正在尝试导入模块，请考虑导入库：

import 'bingmaps';

超越此编译错误的另一个选择是 通过文件包含对@types/bingmaps包的依赖：tsconfig.json

"compilerOptions": {
    //..
    "types": ["bingmaps"]
}

这是一个关于如何在 Angular2+ 应用程序中使用bingmaps包的示例：

map.component.ts文件：

/// <reference types="@types/bingmaps" />

import { Component, OnInit } from "@angular/core";
import { BingMapsAPILoader } from "./BingMapsAPILoader";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html"
})
export class AppComponent  {

  constructor (loader: BingMapsAPILoader) {
    loader.load("bingAPIReady").then(() => this.initMap());
  }

  protected initMap() {
    const options: Microsoft.Maps.IMapLoadOptions = {
      center: new Microsoft.Maps.Location(47.60357, -122.32945),
      credentials:
        "--your Bing Maps API Key goes here--"
    };

    const map = new Microsoft.Maps.Map(document.getElementById("map"), options);
  }
}

map.component.html 文件

<div id="map" style="width: 600px; height: 400px;"></div>

BingMapsAPILoader加载 Bing 地图库的服务在哪里：

import { Injectable } from "@angular/core";

@Injectable()
export class BingMapsAPILoader {

  private getNativeWindow(): any {
    return window;
  }
  private getNativeDocument(): any {
    return document;
  }

  public load(callbackName: string): Promise<void> {
    return new Promise<void>((resolve: Function, reject: Function) => {
      const script = this.getNativeDocument().createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.defer = true;
      script.src = 'https://www.bing.com/api/maps/mapcontrol?callback=bingAPIReady';
      this.getNativeWindow()[callbackName] = () => {
        resolve();
      };
      script.onerror = (error: Event) => {
        reject(error);
      };
      this.getNativeDocument().body.appendChild(script);
    });
  }
}

这是一个演示供您参考

推荐阅读