如何在Angular中使用Azure地图

Question

我找不到任何在Angular中使用Azure Maps的支持，模块或文档。 Azure地图是否仍然是新的并且不支持Angular？

我尝试了以下模块但没有成功：https://www.npmjs.com/package/angular-azure-maps

我曾尝试在Azure Maps（非Angular）的文档中遵循微软的说明，但没有成功。

我使用的是Angular版本5.2.9。

Answer 1

Azure地图相当新，我们还没有机会亲自调查Angular（我是Azure地图控件的程序经理）。这里有一个开源项目由社区启动：https://github.com/Acaisoft/angular-azure-maps我相信这是你在npm尝试的库的源代码。

我们计划调查如何在新的一年中使用Azure Maps更容易在Angular中使用，但可能首先将其集成到现有的许多现有Angular地图库中。

我建议发一个功能请求，以便我们可以跟踪这个，其他人可以在这里进行投资：https://feedback.azure.com/forums/909172-azure-maps

Answer 2

除了@rbrundritt的答案之外，我一直在尝试使用Acaisoft Azure Maps库，而且它充满了错误，并且没有从GitHub存储库链接的样本都可以工作......但我想我有好消息，那里有是a Post, by Chris Pendleton,"Principal PM Manager, Azure Maps"，谈论S1定价等级，我发现了

...我们还将TypeScript定义与Azure Maps Web SDK源代码的副本相结合，并将其作为NPM包提供，从而更容易与现代Web框架集成，并为您提供托管Azure Maps的选项本地Web SDK与您的应用程序，以加快加载速度。您可以使用以下命令找到Azure-Maps-Control或从命令行安装它：

npm和azure-maps-control

编辑（几小时后）：

我尝试了这个库没有成功，同时Azure地图团队创建了适当的文档，并希望有一个如何指导，以使角色工作我将继续使用Leaflet和MapBox。

我希望它有所帮助。

Answer 3

我认为最好的方法是使用原生的azure-maps-control。来自Azure Maps Web Control Samples的演示。

用@angular测试：“^ 7.2.4”。

1. npm install azure-maps-control

此程序包包含源代码的缩小版本以及Azure Maps Web Control的TypeScript定义。

2. maps.component.ts

   import { Component, OnInit } from '@angular/core';
   import * as atlas from 'azure-maps-control';
   
   @Component({
     selector: 'app-maps',
     templateUrl: './maps.component.html',
     styleUrls: ['./maps.component.scss']
   })
   
   export class MapsComponent implements OnInit {
   
     // Azure Active Directory Authentication Client ID
     // or Shared Key Authentication KEY
     // get it from portal.azure.com
     key: string = '{key}';
     map: any;
   
     constructor(
     ) {
     }
   
     ngOnInit() {
       //Initialize a map instance.
       this.map = new atlas.Map('mapContainer', {
         authOptions: {
           authType: 'subscriptionKey',
           subscriptionKey: this.key
         }
       });
   
       //Wait until the map resources are ready.
       this.map.events.add('ready', () => {
         //Create a HTML marker and add it to the map.
         this.map.markers.add(new atlas.HtmlMarker({
           color: 'DodgerBlue',
           text: '10',
           position: [0, 0]
         }));
       });
     }
   
   }

3. maps.component.html <div id="mapContainer"></div>