웹프로그래밍

본문 바로가기
사이트 내 전체검색


웹프로그래밍
웹프로그래밍

2. Google Maps - Overlays

페이지 정보

작성자 관리자 댓글 0건 조회 803회 작성일 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);


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.