我对网络开发相当陌生，我一直在玩这个新的react谷歌 map 包，我使用nPM i@www.example.com包安装了它.vis.gl/react-google--maps
我想知道是否有一个选项可以将我的网站上的嵌入式谷歌 map 设置为黑暗模式？我知道我可以一步一步创建黑暗模式 map 风格，然后通过实际的谷歌API将该风格应用到 map 上，但我无法为自己的生活进行设计，这似乎是一项非常乏味的任务.有没有更简单的方法可以获得 map 的黑暗模式，也许是我不知道的设置，或者是通过tailwind 造型的更简单的方法？
这是我在其中设置 map 的Next.js代码.请就如何改进给我任何其他建议！
谢谢，祝您有美好的一天！
我只是想找到一种通过 map 实现黑暗模式设计的方法.
这是谷歌用于夜间模式Styled Maps - Night Mode | Google for Developers的风格
您可以复制下面的nightModeMapStyles数组，并在夜间/黑暗模式的代码中使用它.
const nightModeMapStyles = [
{ elementType: "geometry", stylers: [{ color: "#242f3e" }] },
{ elementType: "labels.text.stroke", stylers: [{ color: "#242f3e" }] },
{ elementType: "labels.text.fill", stylers: [{ color: "#746855" }] },
{
featureType: "administrative.locality",
elementType: "labels.text.fill",
stylers: [{ color: "#d59563" }],
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [{ color: "#d59563" }],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [{ color: "#263c3f" }],
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [{ color: "#6b9a76" }],
},
{
featureType: "road",
elementType: "geometry",
stylers: [{ color: "#38414e" }],
},
{
featureType: "road",
elementType: "geometry.stroke",
stylers: [{ color: "#212a37" }],
},
{
featureType: "road",
elementType: "labels.text.fill",
stylers: [{ color: "#9ca5b3" }],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [{ color: "#746855" }],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{ color: "#1f2835" }],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{ color: "#f3d19c" }],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [{ color: "#2f3948" }],
},
{
featureType: "transit.station",
elementType: "labels.text.fill",
stylers: [{ color: "#d59563" }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#17263c" }],
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [{ color: "#515c6d" }],
},
{
featureType: "water",
elementType: "labels.text.stroke",
stylers: [{ color: "#17263c" }],
},
];
react 代码:
<Map
defaultZoom={9}
defaultCenter={{ lat: 53.54, lng: 10 }}
styles={nightModeMapStyles}
/>