구글 맵에 마커를 추가합니다 :
구글지도 - 오버레이
오버레이 / 경도 좌표 위도 수밖에지도 개체입니다.
Google지도는 오버레이의 여러 종류가 있습니다 :
- 마커 -지도에 단일 위치. 마커는 또한 사용자 정의 아이콘 이미지를 표시 할 수 있습니다
- 폴리 라인 -지도에 직선의 시리즈
- 다각형 -지도에 직선의 시리즈 및 형상은 "닫기"
- 원과 사각형
- 정보 윈도우 -지도의 상단에 팝업 풍선 내 콘텐츠를 표시합니다
- 사용자 정의 오버레이
구글지도 - 마커를 추가
마커 생성자는 마커를 생성합니다. (마커가 표시하는 위치 속성이 설정되어야합니다).
사용하여지도에 마커를 추가 setMap() 메소드를 :
구글지도 - 마커 애니메이션
아래의 예는 애니메이션 속성과 마커를 애니메이션하는 방법을 보여줍니다
예
var
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map); »그것을 자신을 시도 구글지도 - 아이콘 대신 마커
아래의 예는 이미지 지정 (icon) 기본 마커 대신 사용 :
예
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map); »그것을 자신을 시도 구글지도 - 폴리 라인
폴리 라인은 정렬 된 순서대로 일련의 좌표를 통해 그려지는 선이다.
폴리 라인에는 다음과 같은 속성을 지원합니다 :
- 경로 - 여러 위도 / 경도 선 좌표를 지정합니다
- 은, strokeColor는 - 라인에 해당하는 16 진수 색상을 지정합니다 (format: "#FFFFFF")
- strokeOpacity는이 - 라인의 불투명도 (0.0에서 1.0 사이의 값)을 지정
- strokeWeight는 - 픽셀 라인의 획의 무게를 지정합니다
- 편집은 - 라인은 사용자가 편집 할 수 있는지 여부를 정의 (true/false)
예
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
}); »그것을 자신을 시도 구글지도 - 다각형
그것이 순서가 지정된 일련의 좌표로 구성되어 있다는 점에서 다각형는 폴리 라인과 비슷합니다. 그러나, 다각형은 닫힌 루프 내에서 지역을 정의하도록 설계되었습니다.
다각형 직선 이루어지는 및 형상이되는 "closed" (모든 라인을 연결할).
다각형에는 다음과 같은 속성을 지원합니다 :
- 경로 - 여러 LatLng를가 (처음과 마지막 동일한 좌표) 라인 좌표를 지정합니다
- 은, strokeColor는 - 라인에 해당하는 16 진수 색상을 지정합니다 (format: "#FFFFFF")
- strokeOpacity는이 - 라인의 불투명도 (0.0에서 1.0 사이의 값)을 지정
- strokeWeight는 - 픽셀 라인의 획의 무게를 지정합니다
- 하고 fillColor는 - 동봉 된 영역 내에서 영역에 대한 16 진수 색상을 지정합니다 (format: "#FFFFFF")
- fillOpacity는 - 채우기 색상의 불투명도 (0.0에서 1.0 사이의 값)을 지정
- 편집은 - 라인은 사용자가 편집 할 수 있는지 여부를 정의 (true/false)
예
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 진수 색상을 지정합니다 (format: "#FFFFFF")
- strokeOpacity는이 - 선 색상의 불투명도 (0.0에서 1.0 사이의 값)을 지정
- strokeWeight는 - 픽셀 라인의 획의 무게를 지정합니다
- 하고 fillColor는 - 원 내의 영역에 대한 16 진수 색상을 지정합니다 (format: "#FFFFFF")
- fillOpacity는 - 채우기 색상의 불투명도 (0.0에서 1.0 사이의 값)을 지정
- 편집은 - 원 사용자에 의해 편집 여부를 정의합니다 (true/false)
예
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
}); »그것을 자신을 시도 구글지도 - InfoWindow는
마커에 대한 몇 가지 텍스트 내용과 함께 InfoWindow는보기 :
예
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker); »그것을 자신을 시도