在Angular中刷新谷歌地图可以通过以下步骤实现:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
请将YOUR_API_KEY替换为你自己的谷歌地图API密钥。
import { Component, OnInit } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
请确保你已经安装了@agm/core
库,它是Angular谷歌地图库的官方包。
export class MapComponent implements OnInit {
constructor(private mapsAPILoader: MapsAPILoader) {}
ngOnInit() {
this.mapsAPILoader.load().then(() => {
// 在这里初始化地图
});
}
}
ngOnInit() {
this.mapsAPILoader.load().then(() => {
const mapOptions = {
center: { lat: 37.7749, lng: -122.4194 }, // 设置地图中心点的经纬度
zoom: 12 // 设置地图缩放级别
};
const map = new google.maps.Map(document.getElementById('map'), mapOptions); // 创建地图
// 在需要刷新地图的时候调用以下代码
google.maps.event.trigger(map, 'resize');
});
}
在上面的示例中,我们创建了一个地图,并在需要刷新地图时调用google.maps.event.trigger(map, 'resize')
方法。
<div id="map"></div>
请确保该元素的大小足够显示地图。
这样,当组件初始化时,谷歌地图将被创建并显示在指定的元素中。当需要刷新地图时,调用google.maps.event.trigger(map, 'resize')
方法即可。
领取专属 10元无门槛券
手把手带您无忧上云