AGM地图是一个用于显示地图和位置信息的库。当使用AGM地图时,如果要更新单例值(例如地图的中心点或缩放级别),地图不会自动反映这些更改。要解决这个问题,可以使用以下代码示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-map',
template: `
`,
styles: [`
agm-map {
height: 300px;
}
`]
})
export class MapComponent {
mapCenter = { lat: 51.5074, lng: -0.1278 };
zoomLevel = 10;
updateMapCenter() {
// Function to update the map center
this.mapCenter = { lat: 40.7128, lng: -74.0060 };
}
}
在上述代码中,定义了一个updateMapCenter()
函数来更新地图的中心点。当调用updateMapCenter()
函数时,地图的中心将更新为新的坐标。
在使用地图的地方,调用updateMapCenter()
函数以更新地图的中心点。
import { Component } from '@angular/core';
import { MapComponent } from './map.component';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(private mapComponent: MapComponent) {}
updateCenter() {
this.mapComponent.updateMapCenter();
}
}
在上述代码中,我们在AppComponent
中注入了MapComponent
,并在按钮的点击事件中调用了updateMapCenter()
函数来更新地图的中心点。
这样,当点击“Update Map Center”按钮时,地图的中心点将更新为新的坐标,并在地图上反映出来。
上一篇:AGM地图与*ngIf