기호 (벡터 기반 아이콘)

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
  1. 소개
  2. 기호의 속성
  3. 사전 정의된 기호
  4. 마커에 기호 추가하기
  5. 다중선에 기호 추가
  6. 기호 애니메이션

소개

SymbolMarker 또는 Polyline 객체에 표시될 수 있는 벡터 기반 아이콘입니다. 기호의 모양은 SVG 경로 표기법을 사용하여 경로에 의해 정의됩니다. path가 유일한 필수 속성이지만, Symbol 객체는 획 및 채우기의 색상과 두께 등 시각적 측면을 맞춤설정할 수 있는 다양한 속성을 지원합니다. 속성 목록을 참조하세요.

SymbolPath 클래스를 통해 몇 가지 사전 정의된 기호를 사용할 수 있습니다. 아래 목록을 참고하세요.

기호의 속성

Symbol의 기본 동작은 마커에 표시되는지 또는 다중선에 표시되는지에 따라 약간 다릅니다. 이러한 차이는 아래 속성 목록에 설명되어 있습니다.

Symbol는 다음 속성을 지원합니다.

  • path (필수)는 기호의 모양을 정의하는 경로입니다. google.maps.SymbolPath에서 사전 정의된 경로 중 하나를 사용하거나 SVG 경로 표기법을 사용하여 맞춤 경로를 정의할 수 있습니다. 참고: 다중선의 벡터 경로는 22x22px 정사각형 안에 맞아야 합니다. 경로에 이 정사각형 외부의 점이 포함되어 있으면 기호의 scale 속성을 0.2와 같은 분수 값으로 조정하여 조정된 지점이 정사각형 안에 맞도록 해야 합니다.
  • anchor는 마커 또는 다중선을 기준으로 기호의 위치를 설정합니다. 기호 경로의 좌표는 각각 앵커의 x 및 y 좌표에 의해 왼쪽과 위쪽으로 변환됩니다. 기본적으로 기호는 (0, 0)에 고정됩니다. 위치는 기호의 경로와 동일한 좌표계로 표현됩니다.
  • fillColor는 기호의 채우기 색상입니다 (즉, 획으로 둘러싸인 영역). 확장된 이름이 붙은 색상을 제외하고 모든 CSS3 색상이 지원됩니다. 마커에 있는 기호의 경우 기본값은 'black'입니다. 다중선에 있는 기호의 경우 기본값은 해당 다중선의 획 색상입니다.
  • fillOpacity은 기호 채우기의 상대적 불투명도 (즉, 투명도 부족)를 정의합니다. 값의 범위는 0.0 (완전히 투명)에서 1.0 (완전히 불투명)입니다. 기본값은 0.0입니다.
  • rotation는 기호를 회전하는 각도로, 시계 방향으로 표현됩니다. 기본적으로 기호 마커의 회전은 0이며, 다중선의 기호는 가장자리가 있는 각도로 회전합니다. 다중선에 있는 기호의 회전을 설정하면 기호의 회전이 수정되어 선의 곡선을 더 이상 따르지 않습니다.
  • scale는 기호의 배율이 조정되는 크기를 설정합니다. 기호 마커의 경우 기본 배율은 1입니다. 확장 후 기호의 크기는 자유롭게 지정할 수 있습니다. 다중선에 있는 기호의 경우 기본 배율은 다중선의 획 두께입니다. 크기 조정 후 기호는 기호의 앵커를 중심으로 22x22px 정사각형 안에 있어야 합니다.
  • strokeColor는 기호 윤곽선의 색상입니다. 이름이 지정된 확장 색상을 제외한 모든 CSS3 색상이 지원됩니다. 마커에 있는 기호의 경우 기본값은 'black'입니다. 다중선에 있는 기호의 경우 기본 색상은 다중선의 획 색상입니다.
  • strokeOpacity는 기호 획의 상대적 불투명도 (즉, 투명도 부족)를 결정합니다. 값의 범위는 0.0 (완전히 투명)에서 1.0 (완전히 불투명)입니다. 기호 마커의 경우 기본값은 1.0입니다. 다중선에 있는 기호의 경우 기본값은 다중선의 획 불투명도입니다.
  • strokeWeight은 기호의 윤곽선 가중치를 정의합니다. 기본값은 기호의 scale입니다.

사전 지정된 기호

Maps JavaScript API는 SymbolPath 클래스를 통해 마커나 다중선에 추가할 수 있는 몇 가지 기본 기호를 제공합니다.

기본 기호에는 원과 두 가지 유형의 화살표가 포함됩니다. 앞으로 및 뒤로 향한 화살표를 모두 사용할 수 있습니다. 다중선에 있는 기호의 방향이 고정되어 있으므로 다중선에 특히 유용합니다. 앞으로는 다중선의 끝 방향으로 간주됩니다.

기본 기호 옵션을 사용하여 사전 정의된 기호의 획이나 채우기를 수정할 수 있습니다.

다음과 같은 사전 정의된 기호가 포함됩니다.

이름 설명
google.maps.SymbolPath.CIRCLE
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW 뒤쪽을 가리키는 모든 면이 닫힌 화살표
google.maps.SymbolPath.FORWARD_CLOSED_ARROW 앞쪽을 가리키는 모든 면이 닫힌 화살표
google.maps.SymbolPath.BACKWARD_OPEN_ARROW 뒤쪽을 가리키는 한쪽이 열린 화살표
google.maps.SymbolPath.FORWARD_OPEN_ARROW 앞쪽을 가리키는 한쪽이 열린 화살표

마커에 기호 추가

마커에서 벡터 기반 아이콘을 표시하려면 원하는 경로와 함께 Symbol 객체 리터럴을 마커의 icon 속성에 전달합니다. 다음 예에서는 SVG 경로 표기법을 사용하여 마커의 맞춤 아이콘을 만듭니다.

TypeScript

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.

function initMap(): void {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 9,
      center: center,
    }
  );

  const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

자바스크립트

// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a marker-shaped
// symbol with a blue fill and no border.
function initMap() {
  const center = new google.maps.LatLng(-33.712451, 150.311823);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 9,
    center: center,
  });
  const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
  };

  new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,
  });
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

폴리라인에 기호 추가

다중선에 기호를 표시하려면 PolylineOptions 객체의 icons[] 속성을 설정합니다. icons[] 배열은 다음 속성을 포함하는 하나 이상의 IconSequence 객체 리터럴을 사용합니다.

  • icon(필수)는 선에서 렌더링할 기호입니다.
  • offset는 아이콘이 렌더링되는 선의 시작 부분으로부터의 거리를 결정합니다. 이 거리는 선 길이의 백분율 (예: 50% ) 또는 픽셀 (예: 50px)로 표시될 수 있습니다. 기본값은 '100%'입니다.
  • repeat는 선에서 연속적인 아이콘 간의 거리를 결정합니다. 이 거리는 선 길이의 백분율(예: 50%) 또는 픽셀 (예: 50px)로 표시될 수 있습니다. 아이콘 반복을 사용 중지하려면 '0'를 지정하세요. 기본값은 '0'입니다.

기호와 PolylineOptions 클래스를 조합하여 지도에서 다중선의 디자인과 분위기를 세밀하게 제어할 수 있습니다. 다음은 적용 가능한 사용자 지정의 몇 가지 예시입니다.

화살표

IconSequence.offset 속성을 사용하여 다중선의 시작 또는 끝 부분에 화살표를 추가합니다.

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

// Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  icons: [{
    icon: lineSymbol,
    offset: '100%'
  }],
  map: map
});

예 보기

점선

다중선의 불투명도를 0으로 설정하고 불투명한 기호를 일정한 간격으로 선 위에 오버레이하면 파선 효과를 적용할 수 있습니다.

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
  path: 'M 0,-1 0,1',
  strokeOpacity: 1,
  scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
  path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
  strokeOpacity: 0,
  icons: [{
    icon: lineSymbol,
    offset: '0',
    repeat: '20px'
  }],
  map: map
});

예 보기

맞춤 경로

사용자 지정 기호를 사용하여 폴리라인에 다양한 셰이프를 추가할 수 있습니다.

// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
  var symbolOne = {
    path: 'M -2,0 0,-2 2,0 0,2 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
  };

  var symbolTwo = {
    path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
    strokeColor: '#00F',
    rotation: 45
  };

  var symbolThree = {
    path: 'M -2,-2 2,2 M 2,-2 -2,2',
    strokeColor: '#292',
    strokeWeight: 4
  };

  // Create the polyline and add the symbols via the 'icons' property.
  var line = new google.maps.Polyline({
    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
    icons: [
      {
        icon: symbolOne,
        offset: '0%'
      }, {
        icon: symbolTwo,
        offset: '50%'
      }, {
        icon: symbolThree,
        offset: '100%'
      }
    ],
    map: map
  });

예 보기

기호 애니메이트

DOM의 window.setInterval() 함수를 사용하여 기호의 오프셋을 고정된 간격으로 변경하여 경로를 따라 기호에 애니메이션을 적용할 수 있습니다.

TypeScript

// This example adds an animated symbol to a polyline.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: { lat: 20.291, lng: 153.027 },
      zoom: 6,
      mapTypeId: "terrain",
    }
  );

  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };

  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line: google.maps.Polyline) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

자바스크립트

// This example adds an animated symbol to a polyline.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.291, lng: 153.027 },
    zoom: 6,
    mapTypeId: "terrain",
  });
  // Define the symbol, using one of the predefined paths ('CIRCLE')
  // supplied by the Google Maps JavaScript API.
  const lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: "#393",
  };
  // Create the polyline and add the symbol to it via the 'icons' property.
  const line = new google.maps.Polyline({
    path: [
      { lat: 22.291, lng: 153.027 },
      { lat: 18.291, lng: 153.027 },
    ],
    icons: [
      {
        icon: lineSymbol,
        offset: "100%",
      },
    ],
    map: map,
  });

  animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
  let count = 0;

  window.setInterval(() => {
    count = (count + 1) % 200;

    const icons = line.get("icons");

    icons[0].offset = count / 2 + "%";
    line.set("icons", icons);
  }, 20);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기