Jak stylizować część „niezaładowanej mapy” w Mapach Google [duplikat]

Question

Próbuję stylizować mapę Google w trybie ciemnym za pomocą interfejsu API.

Znalazłem ten przykład i działa dobrze. Ale problem polega na tym, że jeśli szybko przewijam mapę, części mapy, które nie zostały jeszcze załadowane, mają jasnoszary kolor, całkowicie pokonując cel trybu ciemnego, aby nie emitować zbyt wiele światła.

Moje pierwsze założenie było takie, że po prostu muszę dodać „elementType” odpowiadający rozładowanym kafelkom. Ale potem znalazłem tę stronę, która nie pomaga, chociaż mówi, że mogę wybrać „wszystkie” funkcje. Ale kiedy to robię, nie wpływa to na kolor nie załadowanych kafelków mapy.

Jak mogę zmienić w Mapach Google kolor nieobciążonego kafelka?

Answer 1

Wydaje mi się, że szukasz opcji MapOption : backgroundColor :

backgroundColor opcjonalny
Typ: string opcjonalny
Kolor używany jako tło elementu DIV Map. Ten kolor będzie widoczny, gdy kafelki nie zostały jeszcze załadowane, gdy użytkownik patrzy. Tę opcję można ustawić tylko wtedy, gdy mapa jest inicjowana.

Coś jak:

backgroundColor: "black",

dowód słuszności koncepcji

fragment kodu:

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>