要从谷歌地图中删除所有标记,您可以使用Angular 6的Google Maps JavaScript API。
首先,您需要在index.html文件中引入Google Maps JavaScript API的脚本:
然后,在您的组件中,您可以使用以下代码来创建和显示地图,并添加一些标记:
import { Component, OnInit } from '@angular/core';
declare var google: any;
@Component({
selector: 'app-map',
template: '',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
map: any;
markers: any[] = [];
ngOnInit() {
this.initMap();
}
initMap() {
// 创建地图
this.map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
// 添加标记
const marker1 = new google.maps.Marker({
position: {lat: -34.397, lng: 150.644},
map: this.map
});
const marker2 = new google.maps.Marker({
position: {lat: -35.397, lng: 151.644},
map: this.map
});
// 将标记存储在markers数组中
this.markers.push(marker1);
this.markers.push(marker2);
}
removeMarkers() {
// 删除所有标记
for (let i = 0; i < this.markers.length; i++) {
this.markers[i].setMap(null);
}
// 清空markers数组
this.markers = [];
}
}
在上面的代码中,initMap()方法用于创建并显示地图,并将标记添加到地图中。removeMarkers()方法用于删除地图上的所有标记。
您可以在模板中使用以下代码触发removeMarkers()方法:
请确保将YOUR_API_KEY替换为您的Google Maps API密钥。此外,请确保在组件中正确导入和声明Google Maps JavaScript API。
这样,当您点击“删除标记”按钮时,所有标记都将从地图中删除。