要将AGM地图的缩放级别设置为包含所有标记点,可以使用以下代码示例:
npm install @agm/core
import { AgmCoreModule } from '@agm/core';
@NgModule({
imports: [
AgmCoreModule.forRoot({
apiKey: 'YOUR_API_KEY', // 替换为您的Google Maps API密钥
})
]
})
export class AppModule { }
import { Component, OnInit, ViewChild } from '@angular/core';
import { AgmMap, LatLngBounds } from '@agm/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
@ViewChild('agmMap') agmMap: AgmMap;
// 示例标记点数组
markers: any[] = [
{ lat: 40.7127753, lng: -74.0059728 },
{ lat: 34.0522342, lng: -118.2436849 },
{ lat: 41.8781136, lng: -87.6297982 }
// 添加更多标记点...
];
ngOnInit() {
this.fitBounds();
}
fitBounds() {
// 创建一个用于包含所有标记点的边界对象
const bounds = new google.maps.LatLngBounds();
// 将每个标记点添加到边界对象中
for (const marker of this.markers) {
bounds.extend(new google.maps.LatLng(marker.lat, marker.lng));
}
// 设置AGM地图的边界为包含所有标记点的边界
this.agmMap.mapReady.subscribe(map => {
map.fitBounds(bounds);
});
}
}
agm-map
指令来显示地图,并在地图上循环显示标记点:
在上述代码中,markers
数组包含了示例标记点的经纬度坐标。您可以根据自己的需求替换它们。
通过调用fitBounds()
函数,在组件初始化期间计算边界并设置地图的缩放级别,以确保所有标记点都可见。
上一篇:AGM地图中不反映单例值更新。
下一篇:AGM多边形绑定不会更新模型