在AGM(Angular Google Maps)中,可以通过使用agm-polygon
指令来绘制多个纬度和经度以进行跟踪。以下是一个示例代码,展示如何使用agm-polygon
指令绘制多个纬度和经度。
首先,确保已经安装了@agm/core
库。可以通过运行以下命令来安装它:
npm install @agm/core
然后,在要使用Google地图的组件中,导入必要的模块和定义经纬度数组:
import { Component } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent {
// 经纬度数组
latLngs: Array<{ lat: number, lng: number }> = [
{ lat: 51.673858, lng: 7.815982 },
{ lat: 51.373858, lng: 7.215982 },
{ lat: 51.723858, lng: 7.895982 }
];
}
然后,在地图组件的HTML模板中,使用agm-map
指令和agm-polygon
指令来绘制多个纬度和经度:
在上面的示例中,我们将latLngs
数组传递给agm-polygon
指令的[paths]
属性。这将绘制一个多边形,使用数组中的经纬度作为多边形的顶点。
确保在模块中导入AgmCoreModule
,并在imports
数组中添加它:
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
AgmCoreModule.forRoot({
// Google Maps API密钥
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
})
]
})
export class AppModule { }
请确保将YOUR_GOOGLE_MAPS_API_KEY
替换为您自己的Google Maps API密钥。
通过上述步骤,您将能够在AGM中绘制多个纬度和经度以进行跟踪。