Angular 5的Azure贴图

Question

我正在尝试在Angular 5中使用Azure Map。我得到下面的错误"Module not found: Error: Can't resolve 'azure-maps-control‘in 'D:\projects\ng5\azure-map\src\app\components\app-map'".

我安装了1.3.8版本的azure-maps control。我的component.ts文件

`

import { Component, OnInit } from '@angular/core';
import * as atlas from 'azure-maps-control';

@Component({
  selector: 'app-app-map',
  templateUrl: './app-map.component.html',
  styleUrls: ['./app-map.component.css']
})
export class AppMapComponent implements OnInit {
  map;
  constructor() { }

  ngOnInit() {
    this.map = new atlas.Map('myMap', {
      center: [-122.33, 47.6],
      zoom: 12,
      language: 'en-US',
      authOptions: {
          authType: 'subscriptionKey',
          subscriptionKey: '<Subscriptyion Key>'
      }
    });
  }

}

`

我已经创建了index.d.ts文件，我在其中声明了像declare module 'azure-maps-control';这样的azure地图模块

我已经在index.html中添加了css和js文件

    <link rel="stylesheet" href="node_modules/azure-maps-control/dist/atlas.min.css" type="text/css"> 
<script src="node_modules/azure-maps-control/dist/atlas.min.js"></script>

Answer 1

尝试下面这样的方法；

import { Component, OnInit } from '@angular/core';
import * as azMaps from 'azure-maps-control';

@Component({
  selector: 'app-app-map',
  templateUrl: './app-map.component.html',
  styleUrls: ['./app-map.component.css']
})
export class AppMapComponent implements OnInit {
  map;
  constructor() { }

  ngOnInit() {
    this.map = new azMaps.Map('myMap', {
      center: [-122.33, 47.6],
      zoom: 12,
      language: 'en-US',
      authOptions: {
          authType: azMaps.AuthenticationType.subscriptionKey,
          subscriptionKey: '<Subscription Key>'
      }
    });
  }

}

例如，这里有一个使用Azure Map的用TypeScript编写的开源项目：https://github.com/Azure-Samples/azure-maps-services-ui