스타일링

개요

지도 스타일은 표준 Google지도에서 사용되는 그것보다 다른 스타일을 반영하기 위해 도로, 공원, 조립 분야와 같은 요소의 시각적 표시를 변경, 표준 Google 기본지도의 프레 젠 테이션을 사용자 정의할 수 있습니다.

지도에 스타일을 적용하는 두 가지 방법이 있습니다 :

설정하여 . 스타일 지도의 재산 MapOptions의 개체를. 이 방법은 표준지도 유형 (지형 및 위성보기에서 기본 이미지가 영향을하지만, 도로, 라벨 등을 존중 스타일링 규정되지 않은)의 스타일을 변경합니다. 참고 기본 맵 스타일링 .
만들고 정의하여 StyledMapType을 하고지도에 적용. 이것은지도 형식 컨트롤에서 선택할 수있는 새지도 유형을 만듭니다. 참조 StyledMapType 만들기 .

두 접근 방법의 배열 걸릴 MapTypeStyle 구성되어 있으며 각각 초, 선택자 및 stylers을 . stylers 이러한 요소의 시각적 수정을 지정하면서 선택자는지도 구성 요소가 스타일링을 위해 선택해야할지 지정합니다.

스타일 구문

스타일링은 색상과지도에 대한 변경 사항을 적용하기 위해 두 개념을 사용합니다

지도 기능은 지도상에 타겟이 될 수있는 지리적 요소입니다. 이들은 도로, 공원, 물 기관 등을뿐 아니라 자신의 레이블을 포함합니다.
Stylers는 색상과 기능을 매핑하는 데 적용할 수있는 가시성 속성입니다. 그들은 색조, 색상, 밝기 / 감마 값 조합을 통해 디스플레이 색상을 정의합니다.

지도 기능과 stylers는 기본지도의에 전달되는 스타일 배열로 결합되어 MapOptions의 객체, 또는에 StyledMapType 생성자. 배열은 다음 형식을 취합니다

VAR stylesArray =  [ 
  { 
    featureType :  '' , 
    elementType :  '' , 
    stylers :  [ 
      { 색조 :  '' }, 
      { 채도 :  '' }, 
      { 가벼움 :  '' }, 
      / / 등 .. 
    ] 
  }, 
  { 
    featureType :  '' , 
    / / 등 .. 
  } 
]

그것의 구성 요소 조각에 대해서는 아래에 설명되어 있습니다.

지도 기능

지도는 사용하고 지정된 도로 또는 공원, 같은 기능의 집합으로 구성되어 MapTypeStyleFeatureType을 . 기능 유형으로 분류 트리를 형성 모든 루트로. 지도 내에서 선택을위한 기능의 전체 목록에 설명되어 지도 자바 스크립트 API V3 참조 . 로 기능을 지정 모든 것은 모든지도 요소를 선택합니다.

기능 구문을 사용하여 지정된 '기능'featureType를 .

예를 들면 다음과 같습니다

{ 
  featureType :  "도로" 
}

일부 기능 유형 분류는 점선 표기법 (사용 지정 하위 범주가 포함 landscape.natural 또는 road.local , 예를 들어). 부모 기능 (경우 도로 , 예를 들어)가 지정되어, 다음이 선택에 적용된 스타일도, 그 아이들에게 적용됩니다.

또한,지도에서 몇 가지 기능은 서로 다른 포함할 요소를 . 도로 예를 들어,지도에서 그래픽 라인 (기하학), 또한 그 이름 (레이블) 나타내는 텍스트뿐만 아니라 구성되어 있습니다. 기능 내의 요소 유형의 카테고리 지정하여 선택 MapTypeStyleElementType을 . 다음 요소 유형이 지원됩니다 :

전체 (기본값)은 그 기능의 모든 요소를 선택합니다.
지오메 트리는 그 기능만을 기하학적 요소를 선택합니다.
라벨은 그 기능과 관련된 전용 텍스트 레이블을 선택합니다.

다음 사양은 모든 지방 도로에 대한 레이블을 선택합니다 :

{ 
  featureType :  "road.local" , 
  elementType :  "레이블" 
}

Stylers

Stylers이 유형의 옵션에 서식하고 있습니다 MapTypeStyler 지도 기능에 적용됩니다. 다음 MapTypeStyler의 옵션이 지원됩니다 :

색조는 (RGB 16 진 문자열) 기본 색상을 나타냅니다.
가벼움은 (사이 부동 소수점 값을 -100 과 100 ) 요소의 밝기의 백분율 변화를 나타냅니다. 음수 값 증가 어둠 (-100이 흑인을 지정 위치) 동안 긍정적인 가치를 증가 밝기 (100 백인은 지정 위치).
채도는 (사이의 부동 소수점 값 -100 과 100 ) 요소에 적용할 기본 색상의 강도 비율의 변화를 나타냅니다.
감마는 (사이의 부동 소수점 값 0.01 와 10.0 , 1.0 에는 정정을 적용하지 않음) 요소에 적용할 감마 보정의 양을 나타냅니다. 흰색 또는 검은색 값을 unaffecting 동안 감마가, 비선형 방식으로 색채의 밝기를 수정합니다. 감마는 일반적으로 여러 요소의 대비를 수정하는 데 사용됩니다. 예를 들어, 요소의 가장자리와 내부 사이의 대비를 늘리거나 줄일 감마를 수정할 수 있습니다. 낮은 감마 값 (<1) 증가 대비, 당분간 높은 값 (> 1) 감소의 명암.
inverse_lightness는 (있다면 진정한 ) 단순히 기존의 가벼움을 전도. 이것은 빠르게 흰색 텍스트 어두운지도로 전환을 위해 예를 들어, 유용합니다.
가시는 ( 에 , 해제 , 또는 간소화 ) 요소가지도에 표시할지 여부와 방법을 나타냅니다. 간단하게 가시는 영향을받는 기능에서 몇 가지 스타일링 기능을 제거, 공원들이 레이블 텍스트를 잃게되지만 라벨 아이콘을 유지하면서 도로, 예를 들어, 윤곽선없이 얇은 라인으로 단순화된다.

Styler 규칙들은 내에 나타나는 순서대로 적용됩니다 MapTypeStyler의 배열입니다. 단일 styler 작업으로 여러 작업을 결합하지 마십시오; 대신 styler 배열에 별도의 항목으로 각 작업을 정의합니다. 주문 몇 가지 작업이 상호 없기 때문에, 중요하다. 특징 및 / 또는 styler 작업 (일반적으로)를 통해 수정되는 요소는 이미 기존의 스타일을 가지고, 만약 존재한다면 작업은, 이러한 기존의 방식에 따라 행동.

색조, 채도, 밝음 모델

지도 스타일링이 사용하는 색상, 채도, 밝음 (HSL) styler 작업 내에서 색상을 상징하는 모델. 이러한 작업은 색상을 정의하는 것은 그래픽 디자인 내에 공통입니다. 색상은 기본 색상을 나타냅니다, 채도는 그 색상의 강도를 표시하고, 밝기는 흰색이나 구성 색상에서 검정색의 상대적 크기를 나타냅니다.

하지만 색조는 HTML 16 진수 색상 값을 소요되며, 그것은 단지 백분율 값으로 별도로 표시됩니다 기본 색상이 아닌 자사의 채도 혹은 밝기를 결정하기 위해이 값을 사용합니다.

RGB 색상의 예 : "# 000000"(블랙)와 "# FFFFFF"(흰색)과 회색의 순수한 음영 등 - - 빨강, 초록, 파랑 동등한 부분으로 이루어져 값은 이들 없음으로 어떠한 색조를 표시하지 값은 HSL 좌표 공간에서 방향을 나타냅니다. , 검은색 흰색 또는 회색 표시하려면 모두 제거해야합니다 채도를 (로 값을 설정한 -100을 )과 조정 가벼움 대신.

또한, 이미 색상이 기존 기능을 수정할 때, 같은 값이 변화하는 색조 것은 기존 변경되지 않습니다 채도 혹은 밝기를 .

Styler 예

밝은 파란색과 같은 기능을 표시하려면 :

stylers :  [ 
  { 색조 :  "# 00d4ff"  }, 
  { 채도 :  60  }, 
  { 가벼움 :  - 20  }, 
  { 감마 :  1.51  } 
]

관계의 시작 색상, 기능에서 모든 색상을 제거하려면 :

stylers :  [ 
  { 채도 :  - 100  } 
]

완전히 기능을 숨기려면 :

stylers :  [ 
  { 가시 :  "OFF"  } 
]

스타일 배열의 예

지도 기능 선택자 및 styler 규칙은 스타일의 배열로 결합됩니다. 기능의 모든 번호는 하나의 배열에 타겟팅할 수 있습니다.

다음 예제는 회색, 파란색 그리고 색상 간선 도로 기하학, 그리고 완전히 숨깁니다 비즈니스 레이블로 모든지도 기능을 해제합니다 :

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

기본 맵 스타일링

기본지도 타입 (라벨과 도로 스타일링 또한 지형 및 위성지도에 영향을)의 스타일을 수정하려면지도 년대 스타일의 배열을 설정 MapOptions 건설시 또는 호출하여 중 setOptions을 .

var pinkParksStyles = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },
  {
    featureType: "poi.park",
    stylers: [
      { hue: "#ff0023" },
      { saturation: 40 }
    ]
  }
];

map.setOptions({styles: pinkParksStyles});

참조 지도 기능 스타일이 될 수지도의 요소에 대한 정보; 볼 Stylers 적용할 수있는 색상과 효과를위한 있습니다.

StyledMapType 만들기

당신은 어떤에 생성하여, 스타일을 적용할 수있는 새로운지도 유형 만들 수 StyledMapType을 하고 생성자 기능 및 styler 정보를 전달합니다. 이러한 접근 방식은 기본 맵 종류의 스타일에 영향을주지 않습니다.

새지도 유형을 생성하려면 :

스타일의 배열을 만듭니다. 지시 사항에 대한지도 기능과 Stylers을 참조하십시오.
새로 만들기 google.maps.StyledMapType의 그것을 스타일의 배열뿐만 아니라 새로운지도 형식의 이름을 전달, 물체를.
지도 개체를 작성하고,지도 옵션에서에서 새지도 유형에 대한 식별자가 포함 mapTypeIds의 배열을 (어떤은의 속성입니다 mapTypeControlOptions의객체).
새로운 스타일의지도와 마지막 단계에서 식별자를 연결합니다.
새로운지도 형식을 사용하도록지도를 설정합니다.

함수 초기화 ()  { 

  / /이 다음 중 배열 만들기 
   
    
 
 
          
      
    
    
 
 
          
          
      
    
  

  그것을 스타일의 배열, 전달, 새로운 StyledMapType 객체를 생성 
  / /뿐만 아니라지도 유형 컨트롤에 표시되는 이름. 
  VAR pinkMapType =  새로운 구글 . 지도 . StyledMapType ( pinkParksStyles , 
    { 이름 :  "핑크 파크" }) , 

  / /지도 객체를 생성하고, 추가하는 MapTypeId 포함 
  지도 형식으로 / /를 
   
 
  
 
  
    
  
   


  MapTypeId 및 표시로 설정과 스타일의지도. 
  지도 . mapTypes . 세트 ( 'pink_parks' , pinkMapType ); 
  지도 . setMapTypeId ( 'pink_parks' ); 
}

결과지도는 아래와 같습니다. 새로운 공지 사항 핑크빛 공원 지도의 오른쪽 상단의 버튼을,이 예제 코드에서 만든 새지도 유형입니다.