如何实现深色模式地图？

Question

我对网络开发相当陌生，我一直在玩这个新的 React google 地图包，我使用 npm i @vis.gl/react-google--maps 包安装了它。

我想知道是否有一个选项可以在我的网站上嵌入谷歌地图深色模式？我知道我可以一步一步创建一个黑暗模式地图样式，然后通过实际的 google api 将该样式应用到地图上，但我无法为我的生活进行设计，这似乎是一项非常乏味的任务。有没有更简单的方法来获得地图的黑暗模式，也许是我不知道的设置，或者通过顺风样式的一些更简单的方法？

这是我设置地图的 Next.js 代码。请给我任何其他关于如何改进的建议！

谢谢您，祝您有美好的一天！

我只是想找到一种方法来用地图实现暗模式设计。

Answer 1

这是谷歌用于夜间模式的风格风格地图 - 夜间模式 | Google 开发者

您可以复制下面的

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" }],
  },
];

反应代码：

<Map
  defaultZoom={9}
  defaultCenter={{ lat: 53.54, lng: 10 }}
  styles={nightModeMapStyles}
/>