要在Angular 11中切换谷歌地图样式,可以使用Angular Google Maps库。以下是一个示例解决方案:
npm install @agm/core
import { Component } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
mapStyles = [
{
featureType: 'water',
elementType: 'geometry',
stylers: [
{ color: '#e9e9e9' },
{ lightness: 17 }
]
},
{
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{ color: '#f5f5f5' },
{ lightness: 20 }
]
},
{
featureType: 'road.highway',
elementType: 'geometry.fill',
stylers: [
{ color: '#ffffff' },
{ lightness: 17 }
]
},
// 添加其他的地图样式
];
constructor(private mapsAPILoader: MapsAPILoader) {}
ngOnInit() {
this.mapsAPILoader.load().then(() => {
this.setMapStyles();
});
}
setMapStyles() {
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40.712776, lng: -74.005974 },
zoom: 12,
styles: this.mapStyles
});
}
在上面的代码中,map
是通过使用google.maps.Map
构造函数创建的地图实例。styles
属性接受地图样式数组。
通过这个解决方案,你可以在Angular 11中切换谷歌地图的样式。只需修改mapStyles
数组中的样式对象即可改变地图的外观。