Google 지도 오버레이

Google 지도 - 오버레이

오버레이는 위도/경도 좌표에 바인딩된 지도의 개체입니다.

Google 지도에는 여러 유형의 오버레이가 있습니다.

• 마커 - 지도의 단일 위치. 마커는 사용자 정의 아이콘 이미지를 표시할 수도 있습니다.
• 폴리라인 - 지도상의 일련의 직선
• 다각형 - 지도의 일련의 직선이며 모양이 "닫힌" 상태입니다.
• 원과 직사각형
• 정보 창 - 지도 상단의 팝업 풍선 안에 콘텐츠를 표시합니다.
• 맞춤 오버레이

Google 지도 - 마커 추가

Marker 생성자는 마커를 생성합니다. 마커를 표시하려면 position 속성을 설정해야 합니다.

setMap() 메서드를 사용하여 지도에 마커를 추가합니다.

Google 지도 - 마커 애니메이션

아래 예는 animation 속성을 사용하여 마커에 애니메이션을 적용하는 방법을 보여줍니다.

Google 지도 - 마커 대신 아이콘

아래 예에서는 기본 마커 대신 사용할 이미지(아이콘)를 지정합니다.

Google 지도 - 폴리라인

폴리라인은 정렬된 순서로 일련의 좌표를 통해 그려지는 선입니다.

폴리라인은 다음 속성을 지원합니다.

• 경로 - 라인에 대한 여러 위도/경도 좌표를 지정합니다.
• strokeColor - 선의 16진수 색상을 지정합니다(형식: "#FFFFFF").
• strokeOpacity - 선의 불투명도를 지정합니다(0.0에서 1.0 사이의 값).
• strokeWeight - 선의 획의 가중치를 픽셀 단위로 지정합니다.
• editable - 사용자가 라인을 편집할 수 있는지 여부를 정의합니다(true/false).

Google 지도 - 다각형

폴리곤은 순서가 지정된 일련의 좌표로 구성된다는 점에서 폴리라인과 유사합니다. 그러나 다각형은 닫힌 루프 내에서 영역을 정의하도록 설계되었습니다.

다각형은 직선으로 이루어지며 모양은 "닫힌" 상태입니다(모든 선이 연결됨).

폴리곤은 다음 속성을 지원합니다.

• 경로 - 라인에 대한 여러 LatLng 좌표를 지정합니다(첫 번째 좌표와 마지막 좌표가 같음).
• strokeColor - 선의 16진수 색상을 지정합니다(형식: "#FFFFFF").
• strokeOpacity - 선의 불투명도를 지정합니다(0.0에서 1.0 사이의 값).
• strokeWeight - 선의 획의 가중치를 픽셀 단위로 지정합니다.
• fillColor - 포함된 영역 내의 영역에 대한 16진수 색상을 지정합니다(형식: "#FFFFFF").
• fillOpacity - 채우기 색상의 불투명도를 지정합니다(0.0에서 1.0 사이의 값).
• editable - 사용자가 라인을 편집할 수 있는지 여부를 정의합니다(true/false).

Google 지도 - 서클

원은 다음 속성을 지원합니다.

• center - 원 중심의 google.maps.LatLng를 지정합니다.
• 반지름 - 원의 반지름을 미터 단위로 지정합니다.
• strokeColor - 원 주위의 선에 대한 16진수 색상을 지정합니다(형식: "#FFFFFF").
• strokeOpacity - 획 색상의 불투명도를 지정합니다(0.0에서 1.0 사이의 값).
• strokeWeight - 선의 획의 가중치를 픽셀 단위로 지정합니다.
• fillColor - 원 내의 영역에 대한 16진수 색상을 지정합니다(형식: "#FFFFFF").
• fillOpacity - 채우기 색상의 불투명도를 지정합니다(0.0에서 1.0 사이의 값).
• editable - 사용자가 서클을 편집할 수 있는지 여부를 정의합니다(true/false).

Google 지도 - 정보창

마커에 대한 일부 텍스트 콘텐츠가 있는 InfoWindow 표시: