2. Google Maps - Overlays
페이지 정보
작성자 관리자 댓글 0건 조회 1,681회 작성일 21-06-29 11:22본문
2. Google Maps - Overlays
구글 맵은 여러 타입의 오버레이를 가지고 있습니다:
- 마커(Marker): 맵에 단일 위치를 표시. 마커는 또한 특정 아이콘 이미지를 통해 표시할 수 있습니다.
- 선(Polyline): 맵에 선분을 연결한 선
- 다각형(Polygon): 닫힌 도형
- 원과 사각형(Circle and Rectangle)
- 정보 창(Info Windows): 맵에 팝업 창으로 정보를 표시
- 커스텀 오버레이(custom overlays)
1. Marker(마커)
마커 생성자(Marker Constructor)는 마커를 생성합니다.(위치 속성을 마커를 표시하기 위해 꼭 작성해야합니다)
setMap() 메소드를 사용해서 마커를 맵에 추가합니다.
예1)
new google.maps.Marker({
position: seoul,
map: map,
label: "서울"
});
예2)
var marker=new google.maps.Marker({
position:seoul,
});
marker.setMap(map);
2. Animate the Marker
아래 예제는 애니메이션 속성을 통해서 마커를 어떻게 움직이는 지 보여줍니다.
var marker=new google.maps.Marker({
position:seoul,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
3. Icon Instead of Marker
아래 예제는 기본 마커 대신에 특정 이미지를 사용하여 마커를 생성하는 예제입니다.
var marker=new google.maps.Marker({
position:seoul,
icon:'pinkball.png'
});
marker.setMap(map);
4. Polygon
다각형(Polygon)은 선과 비슷합니다. 그러나, 다각형은 닫힌 구간으로 이루어진 도형으로 구성되어집니다.
다각형은 아래와 같은 속성을 지원합니다:
- Path: 선의 위도/경도 좌표를 명시(첫과 끝의 좌표는 동일)
- strokeColor: 선을 위한 16진법 색으로 명시
- strokeOpacity: 선의 불투명도를 명시
- strokeWeight: 선의 굵기를 명시
- fillColor: 닫힌 영역안의 색상을 채우기 위한 색을 명시
- fillOpacity: 닫힌 영역안의 불투명도를 위한 명시
- ediatable: 선이 사용자에 의해 수정 가능 여부를 정의(true/false)
var seoul=new google.maps.LatLng(37.541420, 126.991610);
var suwon=new google.maps.LatLng(37.250943, 127.028344);
var incheon=new google.maps.LatLng(37.438567, 126.664466);
var myTrip=[seoul,suwon,incheon,seoul];
var flightPath=new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
5. Circle
원(Circle)은 아래 속성을 지원합니다
- center: 원의 중심부를 google.maps.LatLng로 명시
- radius: 원의 반경을 명시
- strokeColor: 원의 테두리 선을 위한 16진법 색으로 명시
- strokeOpacity: 선의 불투명도를 명시
- strokeWeight: 선의 굵기를 명시
- fillColor: 닫힌 영역안의 색상을 채우기 위한 색을 명시
- fillOpacity: 닫힌 영역안의 불투명도를 위한 명시
- ediatable: 선이 사용자에 의해 수정 가능 여부를 정의(true/false)
var myCity = new google.maps.Circle({
center:suwon,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
6. InfoWindow
텍스트와 마커를 통한 InforWindow를 보이는 예제입니다:
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
댓글목록
등록된 댓글이 없습니다.