Backup

구글맵 - 원 & 직사각형 그리기

원 및 직사각형Javascript Maps API에는 일반 Polygon 클래스 외에도 생성을 단순화할 수 있는 Circle 및 Rectangle에 대한 특정 클래스도 포함되어 있습니다.원Circle은 Polygon과 마찬가지로 원의 모서리('획')에 대해 맞춤 색상, 두께 및 불투명도를 정의할 수 있으며 둘러싸인 지역 내 영역('채우기')에 대해 맞춤 색상 및 불투명도를 정의할 수 있습니다. 색상은 16진수 HTML 스타일로 지정해야 합니다.Polygon과 달리 Circle에 paths를 정의하지는 않습니다. 대신 원에는 모양을 정의하는 두 개의 추가 속성이 있습니다.center는 원 중심의 google.maps.LatLng를 지정합니다.radius는 원의 반경을 지정합니다(미터 단위).다음 코드 스니..

구글맵 - 폴리라인 & 폴리곤 그리기

폴리라인Polyline 클래스는 연결된 선분의 선형 오버레이를 지도에 정의합니다. Polyline 객체는 LatLng 위치의 배열로 구성되며 해당 위치를 순서대로 연결하는 일련의 선분을 만듭니다.폴리라인 옵션Polyline 생성자는 선의 LatLng 좌표를 지정하는 Polyline options 집합과 스타일 집합을 가져와서 폴리라인의 시각적인 동작을 조정합니다.Polyline은 일련의 직선 선분으로 지도에 그려집니다. 선을 생성하거나 생성 후 속성을 변경할 때 사용되는 Polyline options 객체에서 선의 획에 대한 맞춤 색상, 두께 및 불투명도를 지정할 수 있습니다. 폴리라인에서 지원하는 획 스타일은 다음과 같습니다.strokeColor - "#FFFFFF" 형식의 16진수 HTML 색상을 지..

구글맵 - 오버레이(마커) 애니메이션 효과 주기

애니메이션마커를 애니메이션으로 표시하여 다양한 다른 상황에서 동적 움직임을 나타낼 수 있습니다. 마커가 애니메이션되는 방식은 마커의 animation 속성 내에google.maps.Animation 유형으로 지정합니다. 현재 다음 Animation 값이 지원됩니다.DROP은 마커가 처음 지도에 배치될 때 지도 맨 위로부터 떨어져 최종 위치에 놓여져야 함을 나타냅니다. 마커 배치가 완료되면 애니메이션이 중지되고animation이 null로 되돌아 갑니다. 이러한 유형의 애니메이션은 대개 Marker를 생성할 때 지정합니다.BOUNCE는 마커가 제자리에서 '통통 튀어야' 함을 나타냅니다. 통통 튀는 마커는 animation 속성이 명시적으로 null로 설정될 때까지 계속 튀어 오릅니다.기존 마커의 경우 Ma..

구글맵 - 오버레이(마커) 찍기

삭제코드는 있지만 구현은 안된듯하다. var map; var markersArray = []; function initialize() { var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157); var mapOptions = { zoom: 12, center: haightAshbury, mapTypeId: google.maps.MapTypeId.TERRAIN }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); google.maps.event.addListener(map, 'click', function(event) { addMarker(event..

구글맵 - 스타일링

스타일링개요스타일 구문지도 기능Stylers스타일 배열의 예기본 맵 스타일링만들기 StyledMapType을스타일지도 마법사개요지도 스타일은 표준 Google지도에서 사용되는 그것보다 다른 스타일을 반영하기 위해 도로, 공원, 조립 분야와 같은 요소의 시각적 표시를 변경, 표준 Google 기본지도의 프레 젠 테이션을 사용자 정의할 수 있습니다.지도에 스타일을 적용하는 두 가지 방법이 있습니다 :설정하여 . 스타일 지도의 재산 MapOptions의 개체를. 이 방법은 표준지도 유형 (지형 및 위성보기에서 기본 이미지가 영향을하지만, 도로, 라벨 등을 존중 스타일링 규정되지 않은)의 스타일을 변경합니다. 참고 기본 맵 스타일링 .만들고 정의하여 StyledMapType을 하고지도에 적용. 이것은지도 형식 ..

구글맵 - 컨트롤에 상태 추가하기 (예제 - 위치저장하기)

컨트롤에 상태 추가하기컨트롤이 상태를 보관할 수도 있습니다. 다음 예는 위에 표시된 예와 비슷하지만, 새로운 홈 위치를 표시하도록 컨트롤을 설정하는 추가 '홈 설정' 버튼이 컨트롤에 포함됩니다. 이 작업은 컨트롤에 상태를 저장하고 해당 상태에 대한 getters 및 setters를 제공할 home_ 속성을 만들어서 수행합니다.var map; var chicago = new google.maps.LatLng(41.850033, -87.6500523); /** * The HomeControl adds a control to the map that * returns the user to the control's defined home. */ // Define a property to hold the Home ..

구글맵 - 맞춤형 컨트롤

맞춤형 컨트롤사용자와의 상호작용을 처리하기 위해 기존 API 컨트롤의 스타일과 위치를 수정하는 것은 물론 자신의 고유한 컨트롤을 만들 수도 있습니다. 컨트롤은 절대 위치에서 지도 위에 떠 있는 정지된 위젯으로서, 밑에 있는 지도와 함께 움직이는 오버레이와는 다릅니다. 좀 더 기본적으로 말하면 컨트롤은 지도 상의 절대 위치에 있는 요소로서 사용자에게 UI를 표시하고 주로 이벤트 핸들러를 통해 사용자나 지도와 상호작용합니다.고유한 맞춤형 컨트롤을 만들려면 몇 가지 '규칙'이 필요합니다. 다음 가이드라인을 참조하면 도움이 됩니다.표시할 컨트롤 요소에 대한 적절한 CSS를 정의합니다.지도 속성 변경이나 사용자 이벤트(예: 'click' 이벤트)에 대한 이벤트 핸들러를 통해 사용자나 지도와의 상호작용을 처리합니다..

구글맵 - 컨트롤 배치

컨트롤 배치하기각 컨트롤 옵션에는 컨트롤을 배치할 지도의 위치를 나타내는 ControlPosition 유형의 position 속성이 포함되어 있습니다. 이러한 컨트롤을 반드시 배치할 필요는 없습니다. API가 지도 크기 등 지정된 제약조건 내에서 기존 지도 요소나 다른 컨트롤 주변에 '흐르게' 하여 지능적으로 컨트롤의 레이아웃을 지정합니다. 참고: API는 컨트롤을 지능적으로 정렬하지만 지정된 복잡한 레이아웃에서 컨트롤이 겹치지 않는다고 보장할 수는 없습니다.지원되는 컨트롤 위치는 다음과 같습니다.TOP_CENTER - 지도의 상단 중심을 따라 컨트롤을 배치해야 합니다.TOP_LEFT - 지도의 왼쪽 상단을 따라, 컨트롤의 하위 요소가 상단 중심을 향해 '흐르도록' 하여 컨트롤을 배치해야 합니다.TOP_..