디자이너를 위한 GoogleMap 스타일 지정 방법
7386 단어 디자인GoogleMapsAPI
그때의 메모 입니다◯
기본 규칙
GoogleMap 스타일은
featureType (스타일을 적용하는 대상)
elementType (대상을 구성하는 디자인 요소)
stylers (스타일)
라는 세 세트를 JSON 형식으로 지정합니다. ↓ 같은 느낌입니다.
[
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ff0000"
}
]
}
]
featureType, elementType, styler란 무엇입니까?
세 세트 중 스타일러스는 어쩐지 상상할 수 있지만 featureType, elementType은 지금 핀과 오지 않는 분도 있을까 생각합니다.
GoogleMapAPI의 스타일 참조을 본 나 나름의 해석은 다음과 같은 느낌입니다.
featureType (스타일을 적용할 대상)
elementType (그 대상을 구성하는 디자인 요소)
stylers (스타일)
구체적으로 어떤 지정을 할 수 있는지는 스타일 참조 에서 자세하게 설명해 줍니다 ◯
css에 비유해 보면...
어쩐지 css를 닮았을까라고 느꼈으므로, css에 비유해 해석해 보았습니다.
라는 것도 CSS도
선택기 (스타일을 적용하는 대상)
속성 (대상을 구성하는 디자인 요소)
의 3개 세트로 지정하고 있는 곳이 비슷하기 때문입니다.
예를 들어, css에서
.road
라는 클래스를 가진 요소의 채우기를 변경하려면 다음과 같이 됩니다..road { /* セレクター */
background: #ff0000; /* プロパティ:値; */
}
이것을 GoogleMapAPI로 실현하려면 ↓과 같은 느낌입니다 ◯
[
{
"featureType": "road", //featureType
"elementType": "geometry.fill", //elementType
"stylers": [{ //stylers
"color": "#ff0000"
}
]
}
]
정리하면
처럼 파악하면 조금 알기 쉬운 것일까.
다만, css와 GoogleMap는 별개이므로, 위와 같은 포착 방법은 조금 어폐도 있을지도 모릅니다.
어디까지나, 분위기를 잡기 위한 해석의 하나라고 생각해 주시면 좋겠습니다◯
덧붙여서 위의 결과는 ↓와 같습니다.
도로의 칠이 빨간색입니다 ◯
더 스타일을 변경하려면
css와 마찬가지로 featureType, elementType, styler의 세 세트를 여러 개 작성하면 그만큼 많은 스타일을 지정할 수 있습니다.
[
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ff0000"
}
]
},{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#3399ff"
}
]
},
. . .
]
또한 featureType, elementType을 지정하지 않을 수도 있습니다.
이 경우는 모든 featureType, 모든 elementType이 각각 지정됩니다.
참고
[
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ff0000"
}
]
},{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#3399ff"
}
]
},
. . .
]
Styled MapWizard
Reference
이 문제에 관하여(디자이너를 위한 GoogleMap 스타일 지정 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tyan_hikaru/items/368da0a6f6095cb42f42텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)