도형

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
플랫폼 선택: Android iOS 자바스크립트

지도에 다양한 셰이프를 추가할 수 있습니다. 도형은 지도에 있는 객체로, 위도/경도 좌표에 연결되어 있습니다. , 다각형, , 직사각형 등의 도형을 사용할 수 있습니다. 사용자가 도형을 수정하거나 드래그할 수 있도록 도형을 구성할 수도 있습니다.

다중선

지도에 선을 그리려면 폴리라인을 사용합니다. Polyline 클래스는 연결된 선분의 선형 오버레이를 지도에 정의합니다. Polyline 객체는 LatLng 위치의 배열로 구성되며 해당 위치를 순서대로 연결하는 일련의 선분을 만듭니다.

폴리라인 추가

Polyline 생성자는 선의 LatLng 좌표를 지정하는 PolylineOptions 집합과 다중선의 시각적 동작을 조정하는 스타일 집합을 사용합니다.

Polyline 객체는 지도에 일련의 직선 선분으로 그려집니다. 선을 생성할 때 PolylineOptions 내에서 선의 획에 대한 맞춤 색상, 두께, 불투명도를 지정하거나 생성 후 속성을 변경할 수 있습니다. 폴리라인은 다음 스트로크 스타일을 지원합니다.

  • strokeColor"#FFFFFF" 형식의 16진수 HTML 색상을 지정합니다. Polyline 클래스는 이름이 지정된 색상을 지원하지 않습니다.
  • strokeOpacity0.01.0 사이의 숫자 값을 지정하여 선 색상의 불투명도를 결정합니다. 기본값은 1.0입니다.
  • strokeWeight는 픽셀 단위로 선 너비를 지정합니다.

다중선의 editable 속성은 사용자가 도형을 수정할 수 있는지 여부를 지정합니다. 아래의 사용자 수정 가능 도형을 참고하세요. 마찬가지로 사용자가 선을 드래그할 수 있도록 draggable 속성을 설정할 수 있습니다.

TypeScript

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.

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

  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

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

자바스크립트

// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: { lat: 0, lng: -180 },
    mapTypeId: "terrain",
  });
  const flightPlanCoordinates = [
    { lat: 37.772, lng: -122.214 },
    { lat: 21.291, lng: -157.821 },
    { lat: -18.142, lng: 178.431 },
    { lat: -27.467, lng: 153.027 },
  ];
  const flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
  });

  flightPath.setMap(map);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

폴리라인 제거

지도에서 다중선을 삭제하려면 인수로 null를 전달하는 setMap() 메서드를 호출합니다. 다음 예에서 flightPath는 다중선 객체입니다.

flightPath.setMap(null);

이 메서드는 폴리라인을 삭제하지 않습니다. 지도에서 다중선을 삭제합니다. 다중선을 삭제하려면 지도에서 제거한 다음 다중선 자체를 null로 설정해야 합니다.

폴리라인 검사

다중선은 일련의 좌표를 LatLng 객체의 배열로 지정합니다. 이 좌표는 선의 경로를 결정합니다. 좌표를 가져오려면 MVCArray 유형의 배열을 반환하는 getPath()를 호출합니다. 다음 작업을 사용하여 배열을 조작하고 검사할 수 있습니다.

  • getAt()는 지정된 0부터 시작하는 색인 값에서 LatLng를 반환합니다.
  • insertAt()는 지정된 0부터 시작하는 색인 값에 전달된 LatLng를 삽입합니다. 해당 색인 값의 기존 좌표는 앞으로 이동합니다.
  • removeAt()는 지정된 0부터 시작하는 색인 값에서 LatLng를 삭제합니다.

TypeScript

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

let poly: google.maps.Polyline;
let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

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

자바스크립트

// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.
let poly;
let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: { lat: 41.879, lng: -87.624 }, // Center the map on Chicago, USA.
  });
  poly = new google.maps.Polyline({
    strokeColor: "#000000",
    strokeOpacity: 1.0,
    strokeWeight: 3,
  });
  poly.setMap(map);
  // Add a listener for the click event
  map.addListener("click", addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  const path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);
  // Add a new marker at the new plotted point on the polyline.
  new google.maps.Marker({
    position: event.latLng,
    title: "#" + path.getLength(),
    map: map,
  });
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

폴리라인 사용자 지정

벡터 기반 이미지를 기호의 형태로 폴리라인에 추가할 수 있습니다. 기호와 PolylineOptions 클래스를 함께 사용하면 지도에서 다중선의 디자인과 분위기를 세밀하게 제어할 수 있습니다. 화살표, 대시 선, 맞춤 기호, 애니메이션 기호에 관한 자세한 내용은 기호를 참고하세요.

다각형

다각형은 일련의 좌표로 정의된 닫힌 경로 (또는 루프)로 둘러싸인 영역을 나타냅니다. Polygon 객체는 순서가 지정된 일련의 좌표로 이루어졌다는 점에서 Polyline 객체와 유사합니다. 폴리곤은 스트로크와 채우기로 그려집니다. 다각형 가장자리 (획)의 맞춤 색상, 두께, 불투명도와 포함된 영역 (채우기)의 맞춤 색상 및 불투명도를 정의할 수 있습니다. 색상은 16진수 HTML 형식으로 나타내야 합니다. 색상 이름은 지원되지 않습니다.

Polygon 객체는 다음을 포함하여 복잡한 모양을 설명할 수 있습니다.

  • 단일 폴리곤으로 정의된 다수의 비인접 영역.
  • 구멍이 있는 영역
  • 하나 이상의 영역의 교차.

복잡한 셰이프를 정의하려면 다중 경로가 포함된 폴리곤을 사용합니다.

참고: 데이터 영역을 사용하면 다각형을 간단하게 그릴 수 있습니다. 다각형 감기를 대신 처리하여 구멍이 있는 다각형을 더 쉽게 그릴 수 있습니다. 데이터 영역 문서를 참조하세요.

폴리곤 추가

다각형 영역에 별도의 여러 경로가 포함될 수 있으므로 Polygon 객체의 paths 속성은 각각 MVCArray 유형인 배열의 배열을 지정합니다. 각 배열은 정렬된 LatLng 좌표의 별도 시퀀스를 정의합니다.

하나의 경로로만 구성된 단순한 다각형의 경우 LatLng 좌표의 단일 배열을 사용하여 Polygon를 구성할 수 있습니다. Maps JavaScript API는 생성 시 간단한 배열을 paths 속성 내에 저장할 때 배열의 배열로 변환합니다. API는 하나의 경로로 구성된 다각형에 간단한 getPath() 메서드를 제공합니다.

다각형의 editable 속성은 사용자가 도형을 수정할 수 있는지 여부를 지정합니다. 아래에서 사용자가 수정할 수 있는 도형을 참고하세요. 마찬가지로 사용자가 도형을 드래그할 수 있도록 draggable 속성을 설정할 수 있습니다.

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.

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

  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

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

자바스크립트

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });
  // Define the LatLng coordinates for the polygon's path.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.19 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

다각형 자동완성

위 예에서 PolygonLatLng 좌표 조합 4개로 구성되었지만 첫 번째와 마지막 집합은 같은 위치를 정의하여 루프가 완료됩니다. 그러나 실제로는 다각형이 닫힌 영역을 정의하므로 마지막 좌표 집합을 지정할 필요가 없습니다. Maps JavaScript API는 특정 경로의 마지막 위치를 첫 번째 위치와 다시 연결하는 획을 그려서 다각형을 자동으로 완료합니다.

마지막 LatLng이 생략된 것을 제외하고는 이전 예시와 동일합니다. 예시 보기

폴리곤 제거

지도에서 다각형을 삭제하려면 인수로 null를 전달하는 setMap() 메서드를 호출합니다. 다음 예에서 bermudaTriangle는 다각형 객체입니다.

bermudaTriangle.setMap(null);

이 메서드는 폴리곤을 삭제하지 않습니다. 지도에서 다각형을 삭제합니다. 다각형을 삭제하려면 지도에서 제거한 다음 다각형 자체를 null로 설정해야 합니다.

폴리곤 검사

다각형은 일련의 좌표를 배열의 배열로 지정합니다. 여기서 각 배열은 MVCArray 유형입니다. 각 리프 배열은 단일 경로를 지정하는 LatLng 좌표의 배열입니다. 이 좌표를 가져오려면 Polygon 객체의 getPaths() 메서드를 호출하세요. 배열은 MVCArray이므로 다음 작업을 사용하여 배열을 조작하고 검사해야 합니다.

  • getAt()는 지정된 0부터 시작하는 색인 값에서 LatLng를 반환합니다.
  • insertAt()는 지정된 0부터 시작하는 색인 값에 전달된 LatLng를 삽입합니다. 해당 색인 값의 기존 좌표는 앞으로 이동합니다.
  • removeAt()는 지정된 0부터 시작하는 색인 값에서 LatLng를 삭제합니다.

TypeScript

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

let map: google.maps.Map;

let infoWindow: google.maps.InfoWindow;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords: google.maps.LatLngLiteral[] = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);

  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event: any) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this as google.maps.Polygon;
  const vertices = polygon.getPath();

  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

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

자바스크립트

// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.
let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: "terrain",
  });

  // Define the LatLng coordinates for the polygon.
  const triangleCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Construct the polygon.
  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
  // Add a listener for the click event.
  bermudaTriangle.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  // @ts-ignore
  const polygon = this;
  const vertices = polygon.getPath();
  let contentString =
    "<b>Bermuda Triangle polygon</b><br>" +
    "Clicked location: <br>" +
    event.latLng.lat() +
    "," +
    event.latLng.lng() +
    "<br>";

  // Iterate over the vertices.
  for (let i = 0; i < vertices.getLength(); i++) {
    const xy = vertices.getAt(i);

    contentString +=
      "<br>" + "Coordinate " + i + ":<br>" + xy.lat() + "," + xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

폴리곤에 구멍 만들기

다각형 내에 빈 영역을 만들려면 경로 안에 하나씩 경로를 만들어야 합니다. 구멍을 만들려면 안쪽 경로를 정의하는 좌표가 바깥쪽 경로를 정의하는 좌표와 반대 순서여야 합니다. 예를 들어 외부 경로의 좌표가 시계 방향인 경우 내부 경로는 시계 반대 방향이어야 합니다.

참고: 데이터 레이어는 안쪽과 바깥쪽 경로의 순서를 처리하므로 구멍이 있는 다각형을 더 쉽게 그릴 수 있습니다. 데이터 영역 문서를 참조하세요.

다음 예에서는 2개의 경로가 포함된 다각형을 그리고 내부 경로가 외부 경로와 반대 방향으로 감겨 있는 다각형을 그립니다.

TypeScript

// This example creates a triangular polygon with a hole in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 5,
      center: { lat: 24.886, lng: -70.268 },
    }
  );

  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];

  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

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

자바스크립트

// This example creates a triangular polygon with a hole in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: { lat: 24.886, lng: -70.268 },
  });
  // Define the LatLng coordinates for the polygon's  outer path.
  const outerCoords = [
    { lat: 25.774, lng: -80.19 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
  ];
  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  const innerCoords = [
    { lat: 28.745, lng: -70.579 },
    { lat: 29.57, lng: -67.514 },
    { lat: 27.339, lng: -66.668 },
  ];
  // Construct the polygon, including both paths.
  const bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: "#FFC107",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FFC107",
    fillOpacity: 0.35,
  });

  bermudaTriangle.setMap(map);
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

직사각형

Google Maps JavaScript API에는 일반 Polygon 클래스 외에도 구성을 단순화할 수 있는 Rectangle 객체의 특정 클래스가 포함되어 있습니다.

사각형 추가

Rectangle는 직사각형 가장자리 (획)의 맞춤 색상, 두께, 불투명도와 직사각형 내부 영역 (채우기)의 맞춤 색상 및 불투명도를 정의할 수 있다는 점에서 Polygon과 유사합니다. 색상은 16진수 HTML 스타일로 나타내야 합니다.

Polygon와 달리 Rectanglepaths를 정의하지 않습니다. 대신 직사각형에는 직사각형의 google.maps.LatLngBounds를 지정하여 모양을 정의하는 bounds 속성이 있습니다.

직사각형의 editable 속성은 사용자가 도형을 수정할 수 있는지 여부를 지정합니다. 아래의 사용자 수정 가능 도형을 참고하세요. 마찬가지로 사용자가 직사각형을 드래그할 수 있도록 draggable 속성을 설정할 수 있습니다.

TypeScript

// This example adds a red rectangle to a map.

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

  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

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

자바스크립트

// This example adds a red rectangle to a map.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251,
    },
  });
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

다음 코드는 사용자가 지도의 확대/축소를 변경할 때마다 직사각형을 만듭니다. 사각형의 크기는 뷰포트로 결정됩니다.

TypeScript

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

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

  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds() as google.maps.LatLngBounds,
    });
  });
}

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

자바스크립트

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 11,
    center: { lat: 40.74852, lng: -73.981687 },
    mapTypeId: "terrain",
  });
  const rectangle = new google.maps.Rectangle();

  map.addListener("zoom_changed", () => {
    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      bounds: map.getBounds(),
    });
  });
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

사각형 제거

지도에서 직사각형을 삭제하려면 인수로 null을 전달하는 setMap() 메서드를 호출합니다.

rectangle.setMap(null);

이 메서드는 사각형을 삭제하지 않습니다. 지도에서 직사각형을 삭제합니다. 직사각형을 삭제하려면 지도에서 삭제한 다음 직사각형 자체를 null로 설정해야 합니다.

Google Maps JavaScript API에는 일반 Polygon 클래스 외에도 구성을 단순화할 수 있는 Circle 객체의 특정 클래스가 포함되어 있습니다.

원 추가

Circle는 원 가장자리 (획)의 맞춤 색상, 두께, 불투명도와 원 내 영역 (채우기)의 맞춤 색상 및 불투명도를 정의할 수 있다는 점에서 Polygon과 유사합니다. 색상은 16진수 HTML 스타일로 나타내야 합니다.

Polygon와 달리 Circlepaths를 정의하지 않습니다. 대신 원에는 모양을 정의하는 두 개의 추가 속성이 있습니다.

  • center은 원 중심의 google.maps.LatLng를 지정합니다.
  • radius는 원의 반경을 지정합니다(미터 단위).

원의 editable 속성은 사용자가 도형을 수정할 수 있는지 여부를 지정합니다. 아래에서 사용자가 수정할 수 있는 도형을 참고하세요. 마찬가지로 사용자가 원을 드래그할 수 있도록 draggable 속성을 설정할 수 있습니다.

TypeScript

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.

interface City {
  center: google.maps.LatLngLiteral;
  population: number;
}

const citymap: Record<string, City> = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap(): void {
  // Create the map.
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: 37.09, lng: -95.712 },
      mapTypeId: "terrain",
    }
  );

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

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

자바스크립트

const citymap = {
  chicago: {
    center: { lat: 41.878, lng: -87.629 },
    population: 2714856,
  },
  newyork: {
    center: { lat: 40.714, lng: -74.005 },
    population: 8405837,
  },
  losangeles: {
    center: { lat: 34.052, lng: -118.243 },
    population: 3857799,
  },
  vancouver: {
    center: { lat: 49.25, lng: -123.1 },
    population: 603502,
  },
};

function initMap() {
  // Create the map.
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: 37.09, lng: -95.712 },
    mapTypeId: "terrain",
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (const city in citymap) {
    // Add the circle for this city to the map.
    const cityCircle = new google.maps.Circle({
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.35,
      map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
    });
  }
}

window.initMap = initMap;
예 보기

샘플 사용해 보기

원 제거

지도에서 원을 삭제하려면 null을 인수로 전달하는 setMap() 메서드를 호출합니다.

circle.setMap(null);

위의 메서드는 원을 삭제하지 않습니다. 지도에서 원을 삭제합니다. 원을 삭제하려면 지도에서 삭제한 다음 원 자체를 null로 설정해야 합니다.

사용자 수정과 드래그가 가능한 셰이프

도형을 수정 가능하게 설정하면 도형에 핸들이 추가되어 사용자가 지도에서 직접 도형의 위치를 변경하고 모양을 변경하고 크기를 조절할 수 있습니다. 또한 사용자가 지도의 다른 위치로 도형을 이동할 수 있도록 도형을 드래그할 수 있도록 설정할 수 있습니다.

사용자가 객체에 적용한 변경 사항은 세션 간에 유지되지 않습니다. 사용자의 수정사항을 저장하려면 정보를 직접 캡처하고 저장해야 합니다.

수정 가능한 셰이프로 만들기

모든 도형(다중선, 다각형, 원, 직사각형)을 도형 옵션에서 editable을(를) true(으)로 설정하여 사용자가 수정할 수 있도록 설정할 수 있습니다.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

예 보기

드래그 가능한 셰이프로 만들기

기본적으로, 지도에 그려지는 셰이프는 위치가 고정됩니다. 사용자가 지도의 다른 위치로 도형을 드래그할 수 있도록 하려면 도형 옵션에서 draggabletrue로 설정합니다.

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

다각형 또는 다중선에서 드래그를 사용 설정할 때는 geodesic 속성을 true로 설정하여 다각형이나 다중선을 측지선으로 설정하는 것도 고려해야 합니다.

측지 다각형은 이동 시 실제 지리 형태를 유지하므로 메르카토르 투영법에서 북쪽 또는 남쪽으로 이동할 때 다각형이 왜곡되어 표시됩니다. 비 측지 다각형은 항상 화면의 초기 모양을 유지합니다.

최단 거리 다중선에서 다중선의 선은 메르카토르 투영법의 직선이 아니라 구면이라고 가정하고 지표면의 두 지점 사이의 최단 경로로 그려집니다.

좌표계에 관한 자세한 내용은 지도 및 타일 좌표 가이드를 참고하세요.

다음 지도는 크기와 크기가 거의 같은 두 개의 삼각형을 보여줍니다. 빨간색 삼각형에는 geodesic 속성이 true로 설정되어 있습니다. 북쪽으로 이동할 때 셰이프가 어떻게 바뀌는지 살펴봅니다.

예 보기

수정 이벤트 수신

셰이프가 수정되면 수정이 완료되는 즉시 이벤트가 발생합니다. 이러한 이벤트는 아래에 나와 있습니다.

도형 이벤트
radius_changed
center_changed
다각형 insert_at
remove_at
set_at

리스너는 폴리곤 경로에 설정되어야 합니다. 다각형에 여러 경로가 있으면 각 경로에 리스너를 설정해야 합니다.

폴리라인 insert_at
remove_at
set_at

리스너는 다중선 경로에 설정되어야 합니다.

직사각형 bounds_changed

몇 가지 유용한 코드 스니펫:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

직사각형에서 수정 이벤트를 처리하는 예를 참고합니다(예 보기).

드래그 이벤트 수신

도형을 드래그하면 드래그 작업의 시작과 끝은 물론 드래그 도중에도 이벤트가 발생합니다. 다중선, 다각형, 원, 직사각형에서는 다음 이벤트가 발생합니다.

이벤트 설명
dragstart 사용자가 도형 드래그를 시작하면 실행됩니다.
drag 사용자가 도형을 드래그하는 동안 반복적으로 실행됩니다.
dragend 사용자가 셰이프 드래그를 종료할 때 발생합니다.

이벤트 처리에 관한 자세한 내용은 이벤트에 관한 문서를 참고하세요.