在AGM(Angular Google Maps)中,可以通过为每个标记添加唯一的标识符来解决多个标记具有相同坐标的问题。下面是一个示例代码,展示了如何在AGM中实现这一点:
import { Component } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent {
lat = 51.678418;
lng = 7.809007;
zoom = 12;
markers = [
{ lat: 51.678418, lng: 7.809007, label: 'Marker 1', draggable: true },
{ lat: 51.678418, lng: 7.809007, label: 'Marker 2', draggable: true },
{ lat: 51.678418, lng: 7.809007, label: 'Marker 3', draggable: true }
];
markerDragEnd(marker: any, $event: any) {
console.log('dragEnd', marker, $event);
}
}
在这个示例中,我们创建了一个markers数组,其中包含了三个标记对象,它们具有相同的经纬度坐标。通过在HTML模板中使用*ngFor循环来渲染这些标记,我们可以在地图上显示它们。
每个标记都可以通过设置不同的label和draggable属性来进行个性化设置。当标记被拖动时,会触发markerDragEnd事件,可以在组件中的markerDragEnd方法中处理这个事件。
通过为每个标记添加唯一的标识符,我们可以在地图上显示多个具有相同坐标的标记,并对它们进行独立的操作。
上一篇:AGM谷歌地图设置倾斜
下一篇:AGM角谷歌地图图像无法加载