带有 Angular 5 的 Azure 地图

Question

我正在尝试在 Angular 5 中使用 Azure Map。我遇到以下错误“找不到模块：错误：无法解析 'D:\projects\ng5\azure-map\ 中的 'azure-maps-control' 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 文件，我在其中声明了 azure map 模块，例如 declare module 'azure-maps-control';

我已经在 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 Maps 的 TypeScript 编写的开源项目：https://github.com/Azure-Samples/azure-maps-services-ui