구글 맵 레이어

구글 맵 - 레이어

레이어는 위도/경도 좌표에 연결된 지도 위의 객체입니다.

구글 맵에는 여러 유형의 레이어가 있습니다:

  • 마커(Marker) - 지도 위의 단일 위치. 마커는 사용자 정의 아이콘 이미지를 표시할 수도 있습니다.
  • 다이아몬드(Polyline) - 지도 위의 일련의 선
  • 다각형(Polygon) - '닫힌' 모양의 지도 위의 일련의 선
  • 원형과 직사각형(Circle 및 Rectangle)
  • 정보 창(Info Windows) - 맵 상단에弹出气球에 표시될 내용
  • 사용자 정의 레이어(Custom overlays)

구글 맵 - 마커 추가

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

setMap() 메서드를 사용하여 마커를 맵에 추가하세요:

예제

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

구글 맵 - 마커 애니메이션

아래 예제에서는 animation 속성을 사용하여 마커에 애니메이션을 설정하는 방법을 보여줍니다:

예제

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

구글 맵 - 아이콘으로 마커 대체

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

예제

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

구글 맵 - 다이아몬드

다이아몬드는 순서대로 배열된 일련의 좌표로 그려진 선입니다.

다이아몬드는 다음 속성을 지원합니다:

  • path 경도/위도 좌표를 설정합니다.
  • strokeColor - 선의 16진 색상을 정의합니다 (형식: "#FFFFFF")
  • strokeOpacity - 선의 불투명도를 정의합니다 (0.0에서 1.0 사이의 값)
  • strokeWeight - 선의 두께를 정의합니다 (픽셀为单位)
  • editable - 사용자가 이 줄을 편집할 수 있는지 정의합니다 (true/false)

예제

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  
  
  strokeWeight:2
});

구글 맵 - 다각형

다각형은 곡선과 유사하게, 순서대로 배열된 일련의 좌표로 구성됩니다. 그러나 다각형은 닫힌 반경 내부의 영역을 정의하기 위해 설계되었습니다.

다각형은 직선으로 구성되며, 모양이 "닫힌" (모든 선이 연결됩니다)

다각형은 다음과 같은 속성을 지원합니다：

  • path - 선의 여러 위도/경도 좌표를 정의합니다 (첫 번째와 마지막 좌표가 같습니다)
  • strokeColor - 선의 16진 색상을 정의합니다 (형식: "#FFFFFF")
  • strokeOpacity - 선의 불투명도를 정의합니다 (0.0에서 1.0 사이의 값)
  • strokeWeight - 선의 두께를 정의합니다 (픽셀为单位)
  • fillColor - 닫힌 영역 내부의 색상을 정의합니다 (형식: "#FFFFFF")
  • fillOpacity - 채우기 색상의 불투명도를 정의합니다 (0.0에서 1.0 사이의 값)
  • editable - 사용자가 이 줄을 편집할 수 있는지 정의합니다 (true/false)

예제

var myTrip = [stavanger,amsterdam,london,stavanger];

  path:myTrip,
  
  
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

구글 맵 - 원

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

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

예제


  
  radius:20000,
  
  
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

구글 맵 - 정보 창

marker에 텍스트 내용을 포함한 정보 창을 표시합니다：

예제

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);