google-maps - AGM 地图:设置缩放级别以包括所有标记
问题描述
要将地图缩放级别设置为包括所有位置标记,我尝试了本文中建议的两个选项。
这是我所做的:
export class LocationSelectionComponent implements OnInit, AfterViewInit {
@ViewChild('AgmMap') agmMap: AgmMap;
ngAfterViewInit() {
console.log(this.agmMap);
this.agmMap.mapReady.subscribe(map => {
const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
for (const mm of this.mapMarkers) {
if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) {
bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
}
}
map.fitBounds(bounds);
});
}
}
请注意,this.mapMarkers 是一个数组,其中包含地图标记的坐标。这些填充在ngOnInit()
.
如上述帖子的评论中所述,我还尝试了以下方法:
onMapReady(map: AgmMap) {
const bounds: LatLngBounds = new window['google'].maps.LatLngBounds();
for (const mm of this.mapMarkers) {
if (mm.latitude !== this.currentLocationLatitude && mm.longitude !== this.currentLocationLongitude) {
bounds.extend(new window['google'].maps.LatLng(mm.latitude, mm.longitude));
}
}
// @ts-ignore
map.fitBounds(bounds);
}
然后在 HTML 中:
<agm-map #AgmMap [latitude]="latitude" [longitude]="longitude"
[fullscreenControl]="true" [mapTypeControl]="true" (mapReady)="onMapReady($event)">
<agm-marker *ngFor="let m of mapMarkers; let i = index"
[latitude]="m.latitude"
[longitude]="m.longitude"
[title]="m.title"
[iconUrl]="m.iconUrl"
[animation]="m.animation"
(markerClick)="clickedMarker(m.label)">
</agm-marker>
</agm-map>
但是在这两种情况下,我都没有像我预期的那样缩小地图。原因是,当我调试代码时,mapMarkers 数组在两个实例中都是空的。我该如何解决?
解决方案
添加[fitBounds]="true"
到<agm-map>
添加[agmFitBounds]="true"
到<agm-marker>
[usePanning]="true"
从中删除<agm-map>
为了提高可用性添加集群: 安装此模块并按照说明进行操作
推荐阅读
- docker - docker 重启后缺少 iptables 规则。如何永久保存?
- python - ModuleNotFoundError:没有名为“tensorflow.python.eager”的模块
- flutter - 一个变量值随着另一个变量值的改变而改变
- c# - 在 C# 中使用 Dapper 和 Postgresql 从存储过程中获取 json 或 jsonb 结果
- reactjs - 从 reactjs 中的另一个子组件触发子重新渲染
- python - 如何使用列表作为列制作表格?
- http - 如何在 C# 中模拟邮递员的帖子
- javascript - 将 db 和 logger 传递给 Express 中的路由的最佳做法是什么
- node.js - 使用 AWS Lambda 和 ALB 获取空文件
- r - 使用标准动词 i dplyr/dbplyr 时获取 `sysdate`