구글지도 오버레이

Google지도에서 마커를 추가

구글지도 - 오버레이

오버레이는 위도 / 경도 바인드 된 오브젝트가지도를 드래그 좌표 또는 당신과 함께 이동합니다지도를 확대한다.

Google지도 API는 다음과 오버레이 있습니다 :

(가) 종종 사용자 정의 아이콘을 표시 표시지도 마커를 사용하여 포인트. 마커 객체 GMarker 유형, 그리고 개체 GIcon 아이콘의 유형을 정의하는 데 사용할 수 있습니다.
(점들의 집합을 나타냄)지도를 이용하여 폴리 라인에서 라인을 표시한다. 유형 객체의 GPolyline 라인.
(이 사각형 영역 인 경우) 또는 하부 오버레이 (영역이 임의의 형상 인 경우)지도상의 영역은 다각형으로 표시된다. 닫힌 폴리 라인과 유사한 다각형, 그것은 어떤 모양이 될 수 있습니다. 지면 오버레이 일반적으로 직접 또는 간접적으로 연관된 타일 영역을 매핑하는 데 사용된다.
지도 자체는 타일 오버레이를 사용하여 표시됩니다. 당신이 타일의 시리즈를 소유하고 있다면, 당신은지도에 기존의 타일을 변경 GTileLayerOverlay 클래스를 사용할 수 있습니다, 당신은 당신의 자신의지도 유형을 만들 GMapType을 사용할 수 있습니다.
정보 창은 오버레이의 특별한 종류이다. 참고하지만, 정보 윈도우는 자동적으로 맵에 추가되고, 상기지도는 하나 GInfoWindow 유형 오브젝트를 추가 할 수있다.

구글지도 - 태그를 추가합니다

지도는 기록에 포인트를 식별합니다. 기본적으로, 그들은 (당신은 또한 사용자 정의 아이콘을 지정할 수 있습니다) G_DEFAULT_ICON를 사용합니다. GMarker 생성자하여 GLatLng 및 GMarkerOptions 매개 변수로 (선택 사항) 객체입니다.

디자인 태그는 대화 할 수 있습니다. 예를 들어, 기본적으로 그들은받을 종종 이벤트 리스너의 정보 창을 열 때 사용, 이벤트를 "클릭".

하는 setMap () 메소드에 의해지도에 마커를 추가합니다 :

예

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

marker.setMap(map);

»시도

구글지도 - 드래그 마커

다음은 마커를 드래그 애니메이션 속성을 사용하는 방법에 대해 설명합니다 :

예

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);

»시도

구글지도 - 폴리 라인

GPolyline 객체는지도에 선형 오버레이를 만들 수 있습니다. GPolyline 포인트의 시리즈를 포함하고 이러한 점을 연결 질서 일련의 선을 생성한다.

폴리 라인은 다음과 같은 속성을 지원합니다 :

경로 - 위도 / 경도 좌표의 하나 이상의 행을 지정
은, strokeColor는 - 라인의 16 진수 색상 값 ( "#FFFFFF"형식)을 지정
strokeOpacity는 - 투명성 지정된 라인 (1.0 값 0.0)
strokeWeight는 - 픽셀 라인의 폭을 정의합니다.
편집 - 사용자가 직선의 정의를 편집 할 수 있는지 여부 (참 / 거짓)

예

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});

»시도

구글지도 - 다각형

그들이 주문한 일련의 점을 포함하기 때문에 GPolygon 객체는 비슷한 GPolyline 개체입니다. 그러나, 다각형은 두 종점이 있지만, 폐 루프 영역의 디자인이 형성 정의된다.

그리고 라인, 당신은 색상 및 투명도 다각형 가장자리 (선) 색상, 두께, 투명도,뿐만 아니라 채워진 영역의 폐쇄를 사용자 정의 할 수 있습니다. 색상은 16 진수 HTML 스타일에 있어야합니다.

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

경로 - 지정 다중 선형 위도 좌표 (첫 번째와 마지막 좌표가 동일)
은, strokeColor는 - 라인의 16 진수 색상 값 ( "#FFFFFF"형식)을 지정
strokeOpacity는 - 투명성 지정된 라인 (1.0 값 0.0)
strokeWeight는 - 픽셀 라인의 폭을 정의합니다.
하고 fillColor - 폐쇄 구역 지정 16 진수 색상 값 (형식 : "#FFFFFF")
fillOpacity는 - 투명성 (0.0 1.0에있는) 채우기 색상을 지정
편집 - 사용자가 직선의 정의를 편집 할 수 있는지 여부 (참 / 거짓)

예

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

»시도

구글지도 - 라운드

라운드는 다음과 같은 속성을 지원합니다 :

센터 - 원 지정된 파라미터의 중심점은 google.maps.LatLng
반경 - 미터, 원의 반경을 지정
은, strokeColor는 - 아크 16 진수 색상 값 ( "#FFFFFF"형식)를 지정합니다
strokeOpacity는 - 투명성 지정된 호 (1.0 값 0.0)
strokeWeight는 - 픽셀 라인의 폭을 정의합니다.
하고 fillColor는 - 원 채우기 값의 16 진수 색상 값 ( "#FFFFFF"형식)을 지정
fillOpacity는 - 투명성 (0.0 1.0에있는) 채우기 색상을 지정
사용자가 직선을 편집 할 수 있는지 여부를 정의합니다 (참 / 거짓)

예

var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});

»시도