Javascript 如何将Azure地图与Angular 10一起使用？[已解决]

我到处寻找关于如何使用Angular配置Azure地图的适当文档，但没有找到任何内容。我该怎么做

---

（请查看我的自我回答问题的评论）

由于配置Azure地图的Angular文档不存在，本文将实现这一点。在这篇文章的结尾，你应该有一个带有地图标记的Azure地图的工作版本。在添加任何代码之前，请按照Microsoft网站中的步骤设置Azure地图密钥：

创建Azure Maps组件的第一步是创建新的Angular组件，并将以下内容添加到.html文件中：

<div id="azure-map"></div>

此输出将向贴图的父组件发射坐标：

@Output() outputCoordinates: EventEmitter<number[]> = new EventEmitter<number[]>();

接下来，我们将在InitMap（）中添加此代码段，以注册地图单击手柄和缩放控件：

this.map.events.add('ready', () => {
  // Register the map click handler
  this.map.events.add('click', (e) => {
    this.outputCoordinates.emit([e.position[0], e.position[1]]); // 0 = longitude, 1 = latitude
  });

  //Construct a zoom control and add it to the map.
  this.map.controls.add(new atlas.control.ZoomControl({
    style: ControlStyle.auto,
    zoomDelta: 1
  }), {position: ControlPosition.BottomLeft});
});

我们还必须在ngOnInit（）内部调用InitMap（）函数

下一步是创建允许用户在地图上放置和移动图钉的功能。此函数将删除地图上的当前标记，设置新标记的坐标，初始化标记拖动处理程序，并设置地图边界以跟踪新放置的针标记。要处理所有这些操作，我们将添加以下类变量：

markersReference: Marker[] = [];

这个功能是：

setMarkers(markers: Marker[]) {
  if (markers && markers.length > 0) {
    this.markersReference = markers;
    this.map.markers.clear();
    let boundsPositions: Array<{lng: number, lat:number}> = [];
    for (let marker of markers) {
      if (marker.latitude && marker.longitude) {
      let htmlMarker = new atlas.HtmlMarker({
        draggable: true,
        position: [marker.longitude, marker.latitude]  // longitude first
      });
      // Register the marker drag handler
      this.map.events.add('dragend', htmlMarker, (e) => {
        var pos = htmlMarker.getOptions().position;
        this.outputCoordinates.emit([pos[0], pos[1]]); // 0 = longitude, 1 = latitude
      });
      boundsPositions.push({lng: marker.longitude, lat: marker.latitude}) // lat, lng
      this.map.markers.add(htmlMarker);
    }
  }
  this.map.setCamera({padding: {top: 20, bottom: 20, left: 20, right: 20}, maxZoom: 16,
    bounds: atlas.data.BoundingBox.fromLatLngs(boundsPositions)});
}

最后，为了获取用户对地图所做的更改，我们将订阅地图主题及其标记。将这些输入与类变量一起添加：

@Input() markerDataSubject: Subject<Marker[]> = new Subject<Marker[]>();
@Input() centerMapSubject: Subject<{lng: number, lat: number}> = new Subject<{lng: number, lat: number}>();

并在组件关闭时取消订阅：

ngOnDestroy() {
  for (const s of this.subscriptions) {
    s.unsubscribe();
  }
}

总的来说，.ts文件中的类应类似于以下内容：

export class AzureMapComponent implements OnInit {

  @Input() markerDataSubject: Subject<Marker[]> = new Subject<Marker[]>();
  @Input() centerMapSubject: Subject<{lng: number, lat: number}> = new Subject<{lng: number, lat: number}>();

  @Output() outputCoordinates: EventEmitter<number[]> = new EventEmitter<number[]>();

  subscriptions: Subscription[] = [];
  map: any;
  markersReference: Marker[] = [];
  defaultLat: number = 47.608013;  // Seattle coordinates
  defaultLng: number = -122.335167;

  ngOnInit() {
    this.InitMap();
    this.subscriptions.push((this.centerMapSubject).asObservable().subscribe((coords) =>
      this.centerMapWithCoords(coords.lng, coords.lat)));
    this.subscriptions.push((this.markerDataSubject).asObservable().subscribe((markers) =>
      this.setMarkers(markers)));
  }

  //Create an instance of the map control and set some options.
  InitMap() {
    this.map = new atlas.Map('azure-map', {
      center: [this.defaultLng, this.defaultLat],
      zoom: 12,
      language: 'en-US',
      showLogo: true,
      showFeedbackLink: false,
      dragRotateInteraction: false,
      authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: 'YOUR_SUBSCRIPTION_KEY_HERE'
      }
    });

    this.map.events.add('ready', () => {
      // Register the map click handler
      this.map.events.add('click', (e) => {
        this.outputCoordinates.emit([e.position[0], e.position[1]]); // 0 = longitude, 1 = latitude
      });

      //Construct a zoom control and add it to the map.
      this.map.controls.add(new atlas.control.ZoomControl({
        style: ControlStyle.auto,
        zoomDelta: 1
      }), {position: ControlPosition.BottomLeft});
    });
  }

  setMarkers(markers: Marker[]) {
    if (markers && markers.length > 0) {
      this.markersReference = markers;
      this.map.markers.clear();
      let boundsPositions: Array<{lng: number, lat:number}> = [];
      for (let marker of markers) {
        if (marker.latitude && marker.longitude) {
          let htmlMarker = new atlas.HtmlMarker({
            draggable: true,
            position: [marker.longitude, marker.latitude]  // longitude first
          });
          // Register the marker drag handler
          this.map.events.add('dragend', htmlMarker, (e) => {
            var pos = htmlMarker.getOptions().position;
            this.outputCoordinates.emit([pos[0], pos[1]]); // 0 = longitude, 1 = latitude
          });
          boundsPositions.push({lng: marker.longitude, lat: marker.latitude}) // lat, lng
          this.map.markers.add(htmlMarker);
        }
      }
      this.map.setCamera({padding: {top: 20, bottom: 20, left: 20, right: 20}, maxZoom: 16,
        bounds: atlas.data.BoundingBox.fromLatLngs(boundsPositions)});
    }
  }

  centerMapWithCoords(lon: number, lat: number) {
    this.map.setCamera({zoom: 12, maxZoom: 16, center: [lon, lat]});
  }

  ngOnDestroy() {
    for (const s of this.subscriptions) {
      s.unsubscribe();
    }
  }
}

导出类AzureMapComponent实现OnInit{
@Input（）markerDataSubject:Subject=新主题（）；
@Input（）centerMapSubject:Subject=新主题（）；
@Output（）outputCoordinates:EventEmitter=新的EventEmitter（）；
订阅：订阅[]=[]；
地图：任何；
markersReference:Marker[]=[]；
defaultLat:number=47.608013；//西雅图坐标
defaultLng:number=-122.335167；
恩戈尼尼特（）{
this.InitMap（）；
this.subscriptions.push（（this.centerMapSubject）.asObservable（）.subscribe（（coords）=>
这个.centerMapWithCoords（coords.lng，coords.lat））；
this.subscriptions.push（（this.markerDataSubject）.asObservable（）.subscribe（（markers）=>
这个。设置标记（标记））；
}
//创建贴图控件的实例并设置一些选项。
InitMap（）{
this.map=new atlas.map（'azure-map'{
中心：[this.defaultLng，this.defaultLat]，
缩放：12，
语言：“en US”，
showLogo：没错，
showFeedbackLink:错误，
Dragrotate：错误，
授权选项：{
authType:AuthenticationType.subscriptionKey，
subscriptionKey:'您的订阅密钥\u此处'
}
});
this.map.events.add（'ready'，（）=>{
//注册映射单击处理程序
this.map.events.add（'click'，（e）=>{
this.outputCoordinates.emit（[e.position[0]，e.position[1]]）；//0=经度，1=纬度
});
//构造缩放控件并将其添加到地图中。
this.map.controls.add（新的atlas.control.ZoomControl({
样式：ControlStyle.auto，
zoomDelta:1
})，{position:ControlPosition.BottomLeft}）；
});
}
设置标记（标记：标记[]）{
如果（markers&&markers.length>0）{
this.markersReference=标记；
this.map.markers.clear（）；
让boundsPositions:Array=[]；
for（让标记中的标记）{
if（marker.latitude&&marker.longitude）{
设htmlMarker=new atlas.htmlMarker({
真的，
位置：[marker.longitude，marker.latitude]//首先是经度
});
//注册标记拖动处理程序
this.map.events.add（'dragend'，htmlMarker，（e）=>{
var pos=htmlMarker.getOptions（）.position；
this.outputCoordinates.emit（[pos[0]，pos[1]]）；//0=经度，1=纬度
});
boundsPositions.push（{lng:marker.longitude，lat:marker.latitude}）//lat，lng
this.map.markers.add（htmlMarker）；
}
}
this.map.setCamera（{padding:{top:20，bottom:20，left:20，right:20}，maxZoom:16，
边界：atlas.data.BoundingBox.fromLatLngs（boundsPositions）}）；
}
}
centerMapWithCoords（lon:编号，lat:编号）{
setCamera（{zoom:12，maxZoom:16，center:[lon，lat]}）；
}
恩贡德斯特罗（）{
for（此.subscriptions的常数）{
s、 取消订阅（）；
}
}
}

现在您的Azure Maps组件已经完成，您所要做的就是在您想要放置组件的任何视图的.html中调用组件的实例，并协调所需的输入和输出：

<app-azure-map
    [markerDataSubject]="locationMarkerSubject"
    [centerMapSubject]="centerMapSubject"
    (outputCoordinates)="updateCoordinates($event)">
</app-azure-map>

父组件上的输入主题应如下所示：

locationMarkerSubject: Subject<Marker[]> = new Subject<Marker[]>();
centerMapSubject: Subject<{lng: number, lat: number}> = new Subject<{lng: number, lat: number}>();

locationMarkerSubject:Subject=newsubject（）；
centerMapSubject:Subject=新主题（）；

---

您的updateCoordinates（）函数将在单击地图时处理从用户输入返回的标记数据。

由于不存在用于配置Azure地图的Angular的文档，本文将实现这一点。在这篇文章的结尾，你应该有一个带有地图标记的Azure地图的工作版本。在添加任何代码之前，请按照Microsoft网站中的步骤设置Azure地图密钥：

创建Azure Maps组件的第一步是创建新的Angular组件，并将以下内容添加到.html文件中：

<div id="azure-map"></div>

此输出将向贴图的父组件发射坐标：

@Output() outputCoordinates: EventEmitter<number[]> = new EventEmitter<number[]>();

接下来，我们将在InitMap（）中添加此代码段，以注册地图单击手柄和缩放控件：

this.map.events.add('ready', () => {
  // Register the map click handler
  this.map.events.add('click', (e) => {
    this.outputCoordinates.emit([e.position[0], e.position[1]]); // 0 = longitude, 1 = latitude
  });

  //Construct a zoom control and add it to the map.
  this.map.controls.add(new atlas.control.ZoomControl({
    style: ControlStyle.auto,
    zoomDelta: 1
  }), {position: ControlPosition.BottomLeft});
});

我们还必须在ngOnInit（）内部调用InitMap（）函数

下一步是创建允许用户在地图上放置和移动图钉的功能。此功能将清除当前标记

locationMarkerSubject: Subject<Marker[]> = new Subject<Marker[]>();
centerMapSubject: Subject<{lng: number, lat: number}> = new Subject<{lng: number, lat: number}>();