angular - 有没有办法将 agm-map 主题更改为暗模式或街景?
问题描述
我正在尝试将角度地图主题更改为深色但无法完成。请帮助..我的代码:
<agm-map [latitude]="latitude" [longitude]="longitude"[zoom]="zoom"[class.dark-theme]="isDark" >
map.component.ts:
isDark =真;
解决方案
<agm-map [latitude]="lat" [longitude]="lng" [styles]="mapStyle === 'dark' ? styleDark : styleLight">
.
.
.
</agm-map>
在您的 ts 中,您将具有切换样式的逻辑,或者您可以设置默认样式
public darkStyle = [
{
"elementType": "geometry",
"stylers": [
{
"hue": "#ff4400"
},
{
"saturation": -100
},
{
"lightness": -4
},
{
"gamma": 0.72
}
]
},
{
"featureType": "road",
"elementType": "labels.icon"
},
{
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [
{
"hue": "#0077ff"
},
{
"gamma": 3.1
}
]
},
{
"featureType": "water",
"stylers": [
{
"hue": "#000000"
},
{
"gamma": 0.44
},
{
"saturation": -33
}
]
},
{
"featureType": "poi.park",
"stylers": [
{
"hue": "#44ff00"
},
{
"saturation": -23
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"hue": "#007fff"
},
{
"gamma": 0.77
},
{
"saturation": 65
},
{
"lightness": 99
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"gamma": 0.11
},
{
"weight": 5.6
},
{
"saturation": 99
},
{
"hue": "#0091ff"
},
{
"lightness": -86
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"lightness": -48
},
{
"hue": "#ff5e00"
},
{
"gamma": 1.2
},
{
"saturation": -23
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [
{
"saturation": -64
},
{
"hue": "#ff9100"
},
{
"lightness": 16
},
{
"gamma": 0.47
},
{
"weight": 2.7
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#222222"
}
]
},
];
public defaultStyle = [];
推荐阅读
- reactjs - 当我增加计数器时,它增加了 2 而不是 1。我为此使用反应上下文
- laravel - Laravel 支付 ID 存储错误
- javascript - 如何在javascript中将字符串转换为数组
- android - POST 尝试时的 Android 代码 = 400“错误请求”
- c - 在 C 中,& 运算符在这样使用时会做什么:(x & y)?
- laravel - 如何使用 laravel 创建有限的搜索结果,如果限制 exsausted 用户将不再能够搜索
- vuejs2 - 在没有激活器的情况下使用 Vue、Vuex 和 Vuetify 为每个卡片项创建对话框的最佳实践是什么
- javascript - 请解释为什么此代码返回未定义
- android - NullPointerException 错误。应用程序运行但一直停止。请提供任何帮助
- python - 如何在tensorflow中使用给定的分隔符生成词汇?