Google지도 - 오버레이
오버레이는 맵의 경도/위도 좌표로 바인딩 된 객체이며 맵을 끌거나 축소 할 때 움직입니다.
Google Maps API에는 다음 오버레이가 있습니다.
1.지도의 점은 마커를 사용하여 표시되며 일반적으로 사용자 정의 아이콘이 표시됩니다. 태그는 유형 Gmarker의 객체이며 아이콘은 유형 Gicon의 객체를 사용하여 사용자 정의 할 수 있습니다.
2.지도의 선은 폴리 라인을 사용하여 표시됩니다 (포인트 모음을 나타냅니다). 선은 유형 gpolyline의 객체입니다.
3. 맵의 영역은 다각형 (임의의 모양 인 경우) 또는 바닥 표면 오버레이 (직사각형 영역 인 경우)로 표시됩니다. 다각형은 닫힌 폴리 라인과 유사하므로 어떤 모양이 될 수 있습니다. 지상 오버레이는 일반적으로 타일과 직접 또는 간접적으로 연관성이있는지도에서 사용됩니다.
4. 맵 자체는 타일 오버레이를 사용하여 표시됩니다. 자신만의 일련의 타일이있는 경우 Gtilelayeroverlay 클래스를 사용하여 이미 맵에있는 타일을 변경하거나 Gmaptype를 사용하여 자신의 맵 유형을 만들 수 있습니다.
5. 정보 창은 또한 특수 오버레이 레이어입니다. 그러나 정보 창이 맵에 자동으로 추가되며 맵은 GinfowIndow 유형의 하나만 추가 할 수 있습니다.
Google지도 - 태그 추가
지도에 포인트를 표시하십시오. 기본적으로 G_DEFAULT_ICON을 사용합니다 (사용자 정의 아이콘을 지정할 수도 있음). Gmarker 생성자는 glatlng 및 gmarkeroptions (옵션) 객체를 매개 변수로 가져갑니다.
마커는 대화식으로 설계되었습니다. 예를 들어, 기본적으로 기본적으로 "클릭"이벤트를 수신하며, 이벤트는 종종 이벤트 리스너에서 정보 창을 여는 데 사용됩니다.
setMap () 메소드를 통해 맵에 태그를 추가하십시오.
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center : mycenter, Zoom : 5, MapTypeid : Google.maps.maptypeid.roadmap}; var map = new Google.maps.maps (document.getlemap); Google.maps.marker ({위치 : MyCenter,}); Marker.setMap (map);} Google.maps.event.adddomListener (Wind예제 렌더링 :
Google지도 - 드래그 가능한 태그
다음 예제는 애니메이션 속성을 사용하여 태그를 드래그하는 방법을 설명합니다.
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); var 마커; 함수 초기화 () {var mapprop = {center : mycenter, Zoom : 5, maptypeid : google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ( "googlemap"), mapProp); Marker = new Google.maps.marker ({위치 : MyCenter, Animation : Google.maps.animation.bounce}); Marker.setMap (map);} google.maps.event.adddomListener (Window, 'load', 'load', 초기); </script> </head> <bod> <div id = "googlemap"> </div> </body> </html>Google지도 - 아이콘
기본 아이콘 대신 사용자 정의 새 아이콘으로 태그를 표시 할 수 있습니다.
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center : mycenter, Zoom : 5, MapTypeid : Google.maps.maptypeid.roadmap}; var map = new Google.maps.maps (document.getlemap); Google.maps.marker ({위치 : MyCenter, Icon : 'Pinkball.png'}); Marker.setMap (map);} google.maps.event.event.event.adddomListener ( 'windGoogle지도 - 접는 라인
gpolyline 객체는 맵에 선형 오버레이를 만듭니다. gpolyline에는 일련의 포인트가 포함되어 있으며 이러한 점을 순서대로 연결하는 일련의 라인 세그먼트를 만듭니다.
폴리 라인은 다음과 같은 특성을 지원합니다.
경로 - 여러 직선의 위도/경도 좌표를 지정합니다.
strokecolor- 선의 16 진 색 값을 지정합니다 (형식 : "#ffffff")
StrokeOpacity- 라인의 투명성을 지정합니다 (값은 0.0 ~ 1.0입니다)
스트로크 웨이트 - 라인의 너비를 픽셀로 정의합니다.
편집 가능 - 사용자가 직선을 편집 할 수 있는지 정의합니다 (true/false)
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> var x = new Google.maps.latlng (52.395715,4.888916); var stavanger = new Google.maps.latlng (58.983991,5.734863); var Amsterdam = new Google.maps.latlng (52.395715,4.88916); google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center : x, Zoom : 4, maptypeid : google.maps.maptypeid.roadmap}; var map = new Google.maps.map (Document.GetElementById ( "Googlemap"), MapProp); var mytrip = [Stavanger, Amsterdam, London]; var flightpath = new Google.maps.polyline ({Path : Mytrip : Mytrip : "#0000ff", StrokeOpacity : 0.8, Strokeuge : 2 : 2 : }); flightPath.setMap (map);} google.maps.event.AddDomListener (창, '로드', 초기화); </script> </head> <lody> <div id = "googlemap"> </div> </body> </html>예제 렌더링 :
Google지도 - 다각형
gpolygon 객체는 모두 일련의 순서 지점을 포함한다는 점에서 gpolyline 객체와 유사합니다. 그러나, 폴리 라인과 같은 두 개의 종점을 갖는 대신, 다각형은 폐쇄 루프를 형성하는 영역을 정의하도록 설계되었습니다.
폴리 라인과 마찬가지로 다각형 가장자리 (라인)의 색상, 두께 및 투명성뿐만 아니라 폐쇄 충전 영역의 색상 및 투명성을 사용자 정의 할 수 있습니다. 색상은 16 진수 html 스타일로되어야합니다.
다각형은 다음 속성을 지원합니다.
PATH- 여러 직선 위도의 좌표를 지정합니다 (첫 번째 및 마지막 좌표는 동일합니다).
strokecolor- 선의 16 진 색 값을 지정합니다 (형식 : "#ffffff")
StrokeOpacity- 라인의 투명성을 지정합니다 (이 값은 0.0 ~ 1.0입니다)
스트로크 웨이트 - 라인의 너비를 픽셀로 정의합니다.
FillColor- 닫힌 영역의 16 진 색 값을 지정합니다 (형식 : "#ffffff")
FillOpacity- 충전 색의 투명성을 지정합니다 (값은 0.0 ~ 1.0입니다)
편집 가능 - 사용자가 직선을 편집 할 수 있는지 정의합니다 (true/false)
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> var x = new Google.maps.latlng (52.395715,4.888916); var stavanger = new Google.maps.latlng (58.983991,5.734863); var Amsterdam = new Google.maps.latlng (52.395715,4.88916); google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center : x, Zoom : 4, maptypeid : google.maps.maptypeid.roadmap}; var map = new Google.maps.map (Document.GetElementByID ( "GoogleMap"), MapProp); var mytrip = [Stavanger, Amsterdam, London, Stavanger]; var flightPath = new Google.maps.polygon ({Path : Mytrip, Strokecolor : "#000000ff", StrokePacity : 0.8, Strokepacity : 0.8, Strokepacity : 0.8, Strokepacity : FillColor : "#0000ff", fillopacity : 0.4}); FlightPath.setMap (map);} google.maps.event.adddomListener (Wind예제 렌더링 :
Google지도 - 서클
서클은 다음 속성을 지원합니다.
센터 - Circle Google.maps.latlng의 Center Point 매개 변수 지정
반경 - 원의 반경을 미터로 지정합니다.
strokecolor- 아크의 16 진 색 값을 지정합니다 (형식 : "#ffffff")
StrokeOpacity- 아크의 투명성을 지정합니다 (값은 0.0 ~ 1.0입니다)
스트로크 웨이트 - 라인의 너비를 픽셀로 정의합니다.
FillColor- 서클의 16 진 색 값 채우기 값을 지정합니다 (형식 : "#ffffff")
FillOpacity- 충전 색의 투명성을 지정합니다 (값은 0.0 ~ 1.0입니다)
사용자가 직선을 편집 할 수 있는지 정의합니다 (true/false)
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false "> </script> var misterdam = 새로운 Google.maps.latlng (52.395715,4.88916); function initialize () {var mapprop = {Center : Amsterdam, Zoom : 7, MapTypeid : Google.maps.maptypeid.roadmap}; var map = new Google.maps.map (Document.GetElementByID ( "GoogleMap"), MapProp); var mycity = new Google.maps.circle ({Center : Amsterdam, Radius : 20000, Strokecolor : "#0000ff", Strokeopacity : 0.8, Strokeweight : 2, Fillcolor : "#0000ff", Clillcolor }); mycity.setMap (map);} google.maps.event.AddDomListener (Wind예제 렌더링 :
Google지도 - 정보 창
태그에 문자 메시지 창을 표시합니다.
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> </script> var mycenter = new google.maps.latlng (51.508742, -0.120850); function initialize () {var mapprop = {center : mycenter, Zoom : 5, MapTypeid : Google.maps.maptypeid.roadmap}; var map = new Google.maps.maps (document.getlemap); Google.maps.marker ({위치 : MyCenter,}); Marker.setMap (map); var infowindow = new Google.maps.infowIndow ({content : "hello world!"}); infowindow.open (map, Marker);} google.maps.event.adddomlistener (window, 'load', 'load', 'load', id = "googlemap"> </div> </body> </html>예제 렌더링 :
위는 Google지도 오버레이에 대한 정보를 편집 한 것입니다. 나중에 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!