如何解决如何在 Angular 10 中使用 Azure Maps？ [解决了]
我搜索了很多关于如何使用 Angular 配置 Azure Maps 的正确文档，但没有找到任何内容。我该怎么做？
（请查看我的自我回答问题的评论）
解决方法
由于不存在使用 Angular 配置 Azure Maps 的文档，这篇文章将替代它。在本文结束时，您应该拥有一个带有地图标记的 Azure Maps 的工作 Angular 版本。在添加任何代码之前，请按照 Microsoft 网站上的步骤设置 Azure Map 密钥：https://docs.microsoft.com/en-us/azure/azure-maps/
创建 Azure Maps 组件的第一步是创建一个新的 Angular 组件并将以下内容添加到 .html 文件中：
<div id="azure-map"></div>
该 id 可用于为 .scss 文件中的组件设置样式。
接下来，我们将处理 .ts 文件。首先，让我们设置地图。我们将为地图和坐标添加以下类变量：
map: any;
defaultLat: number = 47.608013; // Seattle coordinates
defaultLng: number = -122.335167;
这个输出将坐标发送到地图的父组件：
@Output() outputCoordinates: EventEmitter<number[]> = new EventEmitter<number[]>();
现在我们将创建一个名为 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'
}
});
接下来，我们将在 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)});
}
现在我们将添加一个函数，使我们可以将地图焦点集中在放置的图钉上：
centerMapWithCoords(lon: number,lat: number) {
this.map.setCamera({zoom: 12,center: [lon,lat]});
}
最后，为了获取用户对地图所做的更改，我们将订阅地图主题及其标记。将这些输入与类变量一起添加：
@Input() markerDataSubject: Subject<Marker[]> = new Subject<Marker[]>();
@Input() centerMapSubject: Subject<{lng: number,lat: number}> = new Subject<{lng: number,lat: number}>();
接下来，将这些订阅添加到您的 ngOnInit()：
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)));
并在组件关闭时取消订阅：
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}>();
@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,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],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,marker.latitude] // longitude first
});
// Register the marker drag handler
this.map.events.add('dragend',(e) => {
var pos = htmlMarker.getOptions().position;
this.outputCoordinates.emit([pos[0],1 = latitude
});
boundsPositions.push({lng: marker.longitude,lng
this.map.markers.add(htmlMarker);
}
}
this.map.setCamera({padding: {top: 20,bounds: atlas.data.BoundingBox.fromLatLngs(boundsPositions)});
}
}
centerMapWithCoords(lon: number,lat: number) {
this.map.setCamera({zoom: 12,lat]});
}
ngOnDestroy() {
for (const s of this.subscriptions) {
s.unsubscribe();
}
}
}
现在您的 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}>();
您的 updateCoordinates() 函数将处理点击地图时从用户输入返回的标记数据。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
