Cara mengatur gaya bagian "peta yang dibongkar" dari Google Maps [duplikat]

Question

Saya mencoba menata Google Map saya dalam mode gelap menggunakan API.

Saya menemukan contoh ini dan berfungsi dengan baik. Namun masalahnya, jika saya menggulir peta dengan cepat, bagian dari peta yang belum dimuat berwarna abu-abu terang, benar-benar mengalahkan tujuan mode gelap untuk tidak memadamkan banyak cahaya.

Asumsi pertama saya adalah bahwa saya hanya perlu menambahkan "elementType" yang sesuai dengan ubin yang dibongkar. Tetapi kemudian saya menemukan halaman ini yang tidak membantu, meskipun dikatakan saya dapat memilih "semua" fitur. Tetapi ketika saya melakukan ini, itu tidak memengaruhi warna petak peta yang dibongkar.

Bagaimana saya bisa membuat Google Maps mengubah warna ubin yang dibongkar?

Answer 1

Saya yakin Anda sedang mencari MapOption : backgroundColor :

backgroundColor opsional
Tipe: string opsional
Warna yang digunakan untuk latar belakang div Peta. Warna ini akan terlihat ketika ubin belum dimuat sebagai panci pengguna. Opsi ini hanya dapat diatur ketika peta diinisialisasi.

Sesuatu seperti:

backgroundColor: "black",

bukti biola konsep

potongan kode:

function initMap() {
  // Styles a map in night mode.
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40.674,
      lng: -73.945
    },
    zoom: 0,
    backgroundColor: "black",
    styles: [{
        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"
        }],
      },
    ],
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Styled Maps - Night Mode</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>