node_modules / bingmaps /类型/ MicrosoftMaps / Microsoft.Maps.d.ts'不是一个模块

Question

我使用的具有角7（CLI）bingmaps的官方NPM。

我加做了配置，NPM的文件中所提及 我目前加载基本兵地图。 在我component.ts文件我在下面一行添加编译器给错误如果不使用这条线（“微软”没有定义）

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

现在，当我编译我得到另一个错误是Microsoft.Maps.All代码是不是一个模块。 这方面有任何想法？这是与角CLI的问题？我刚才提到下面的链接，以及，但没有得到他们所要表达的意思。 git link

Answer 1

您正在尝试导入一个模块，可以考虑导入库，而不是：

import 'bingmaps';

超过这个编译错误，另一种选择是，以包括通过@types/bingmaps文件tsconfig.json包的相关性：

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

下面是如何利用在角2应用bingmaps package一个例子：

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);
    });
  }
}

Here is a demo供你参考