Google지도의 '언로드 된지도'부분의 스타일을 지정하는 방법 [중복]
Dec 14 2020
API를 사용하여 어두운 모드에서 Google지도의 스타일을 지정하려고합니다.
이 예제를 찾았 으며 제대로 작동합니다. 하지만 문제는 맵을 빠르게 스크롤하면 아직로드되지 않은 맵 부분이 밝은 회색으로되어 어두운 모드의 목적을 완전히 무너 뜨리고 많은 빛을 내지 않는다는 것입니다.
첫 번째 가정은 언로드 된 타일에 해당하는 "elementType"을 추가하면된다는 것입니다. 하지만 도움이되지 않는 이 페이지 를 찾았 지만 "모든"기능을 선택할 수 있습니다. 하지만 이렇게하면 언로드 된지도 타일의 색상에는 영향을주지 않습니다.
Google지도에서 언로드 된 타일 색상을 변경하려면 어떻게해야합니까?
답변
1 geocodezip Dec 14 2020 at 09:01
나는 당신이 MapOption을 찾고 있다고 믿습니다 : backgroundColor :
backgroundColor 선택적
유형 : 문자열 선택적
Map div의 배경에 사용되는 색상입니다. 이 색상은 사용자가 이동하면서 타일이 아직로드되지 않은 경우에 표시됩니다. 이 옵션은지도가 초기화 된 경우에만 설정할 수 있습니다.
다음과 같은 것 :
backgroundColor: "black",
개념 증명 바이올린
코드 스 니펫 :
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>