기호(벡터 기반 아이콘)

  1. 소개
  2. 기호의 속성
  3. 사전 정의된 기호
  4. 마커에 기호 추가
  5. 다중선에 기호 추가
  6. 기호 애니메이션

소개

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

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

기호의 속성

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

Symbol은 다음과 같은 속성을 지원합니다.

  • path(필수)는 기호의 모양을 정의하는 경로입니다. google.maps.SymbolPath에서 사전 정의된 경로 중 하나를 사용하거나 SVG 경로 표기법을 사용하여 맞춤 경로를 정의할 수 있습니다. 참고: 다중선의 벡터 경로는 22x22픽셀 정사각형 안에 들어가야 합니다. 경로에 이 정사각형을 벗어난 지점이 포함된 경우 기호의 scale 속성을 0.2와 같은 소수 값으로 조정하여 조정된 지점이 정사각형 안에 들어가도록 해야 합니다.
  • anchor는 마커 또는 다중선을 기준으로 기호의 위치를 설정합니다. 기호의 경로 좌표는 앵커의 x와 y 좌표를 기준으로 각각 왼쪽과 위쪽으로 변환됩니다. 기본적으로 기호는 (0, 0)에 고정됩니다. 이 위치는 기호의 경로와 동일한 좌표계로 표현됩니다.
  • fillColor는 기호의 채우기(획으로 경계가 지정되는 영역)의 색상입니다. 확장되었으며 이름이 지정된 색상을 제외하고 모든 CSS3 색상이 지원됩니다. 마커에 표시되는 기호의 경우 기본값은 '검은색'입니다. 다중선에 표시되는 기호의 경우 기본값은 해당하는 다중선의 획 색상입니다.
  • fillOpacity는 기호 채우기의 상대적인 불투명도(투명도 부족)를 정의합니다. 이 값의 범위는 0.0(완전 투명)에서 1.0(완전 불투명) 사이입니다. 기본값은 0.0입니다.
  • rotation은 기호를 회전하는 각도이며 시계 방향의 도 단위로 표현됩니다. 기본적으로 기호 마커는 회전이 0이고 다중선에 표시되는 기호는 기호가 놓인 가장자리의 각도로 회전합니다. 다중선에서 기호의 회전을 설정하면 기호의 회전이 고정되어 더 이상 선의 곡선을 따르지 않게 됩니다.
  • scale은 기호의 크기를 조정하는 배율을 설정합니다. 기호 마커의 경우 기본 배율은 1입니다. 기호의 배율은 어느 크기로나 조정할 수 있습니다. 다중선에 표시되는 기호의 경우 기본 배율은 다중선의 획 두께입니다. 비율을 조정한 후 기호는 기호의 앵커를 중심으로 22x22픽셀 정사각형 내에 있어야 합니다.
  • strokeColor는 기호 윤곽선의 색상입니다. 확장되었으며 이름이 지정된 색상을 제외하고 모든 CSS3 색상이 지원됩니다. 마커에 표시되는 기호의 경우 기본값은 '검은색'입니다. 다중선에 표시되는 기호의 경우 기본 색상은 다중선의 획 색상입니다.
  • 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: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.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(0, 20),
  };

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts
 드림 <ph type="x-smartling-placeholder">

JavaScript

// 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: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.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(0, 20),
  };

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

window.initMap = initMap;
index.js
 드림 <ph type="x-smartling-placeholder">
예 보기

샘플 사용해 보기

다중선에 기호 추가

다중선에 기호를 표시하려면 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;
index.ts
 드림 <ph type="x-smartling-placeholder">

JavaScript

// 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;
index.js
 드림 <ph type="x-smartling-placeholder">
예 보기

샘플 사용해 보기