Google지도 제어 세트
Google지도 - 기본 제어 설정 :
표준 Google지도를 사용하는 경우 기본 설정은 다음과 같습니다.
1. Zoom-지도의 줌 레벨을 제어하기위한 슬라이더 표시
2.ppan- 맵은 평평한 바닥 보울 모양의 컨트롤을 보여줍니다.
3.maptype- 사용자가 맵 유형 (로드맵 및 satallite)간에 전환 할 수 있습니다.
4. StreetView- 거리 전망 악당 아이콘으로 표시되면지도의 한 지점으로 드래그하여 거리 전망을 열 수 있습니다.
Google지도 - 더 많은 제어 세트
위의 기본 제어 세트 외에도 Google은 다음과 같습니다.
.Scale -Show Map Scale
.Rotate-지도를 회전시킬 수있는 작은 원주 아이콘을 보여줍니다.
.Verview 맵 - 넓은 영역 관점에서지도보기
맵을 만들 때 설정 옵션을 통해 표시되는 컨트롤 세트를 지정하거나 SetOptions ()를 호출하여 맵 설정 옵션을 변경할 수 있습니다.
Google지도 - 기본 제어 세트를 끄십시오
기본 컨트롤 세트를 끄는 것을 원할 수도 있습니다.
기본 컨트롤 세트를 끄려면지도의 비활성화 된 FeableFaultUi의 속성을 true로 설정하십시오.
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> <script> functionize () {var mapprop = {center : new Google.maps.latlng (51.508742, -0.120850), Zoom : 7, DisabledeFaultUi : True, MapTypeid : google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ( "googlemap"), mapProp);} google.maps.event.adddomListener (WindGoogle지도 - 모든 제어 세트를 엽니 다
일부 컨트롤 세트는 기본적으로지도에 나타나고 다른 컨트롤 세트는 설정하지 않으면 그렇지 않습니다.
컨트롤을 true로 설정하여 가시적으로 설정하십시오 - 컨트롤을 허위로 설정하여 숨기십시오.
다음 예제는 모든 컨트롤을 활성화합니다.
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> <script> functionize () {var mapprop = {center : new Google.maps.latlng (51.508742, -0.120850), Zoom : 7, PanconTrol : True, MapTypeControl : True, ScaleControl : True, StreetViewControl : True, True, RoteTecOntrol : Google.maptypeid : Google. }; var map = new Google.maps.map (document.getElementById ( "googlemap"), mapProp);} google.maps.event.adddomListener (WindGoogle지도 - 제어 세트를 수정합니다
일부 맵 컨트롤은 구성 가능합니다. 제어 옵션 필드를 제작하여 제어 세트를 변경하십시오.
예를 들어, 줌 제어를 수정하는 옵션은 줌 컨트롤로로 지정됩니다. ZoomControloptions에는 다음 3 가지 옵션이 포함됩니다.
1. google.maps.zoomcontrolstyle.small- 최소화 줌 제어 표시
2. google.maps.zoomcontrolstyle.large- 표준 줌 슬라이딩 컨트롤을 표시합니다
3. google.maps.zoomcontrolstyle.default-select 장치 및 맵 크기에 따라 가장 적합한 제어
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> <script> functionize () {var mapprop = {center : new Google.maps.latlng (51.508742, -0.120850), Zoom : 7, ZoomControl : True, ZoomControloptions : {style : google.maps.zoomcontrolstyle.small}, maptypeid : google.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ( "googlemap"), mapProp);} google.maps.event.adddomListener (Wind참고 : 컨트롤을 수정 해야하는 경우 먼저 컨트롤을 켜십시오 (TRUE로 설정).
또 다른 컨트롤은 MapType 컨트롤입니다.
MapType 컨트롤은 다음 스타일 옵션 중 하나로 표시 될 수 있습니다.
1. google.maps.maptypecontrolstyle.horizontal_bar, 수평 막대의 Google지도에 표시된 버튼으로 일련의 컨트롤을 표시하는 데 사용됩니다.
2. google.maps.maptypecontrolstyle.dropdown_menu, 단일 버튼 컨트롤을 표시하여 드롭 다운 메뉴에서 맵 유형을 선택할 수 있도록합니다.
3. google.maps.maptypecontrolstyle.default는 화면 크기에 따라 "기본"동작을 표시하는 데 사용되며 API의 이후 버전에서 변경 될 수 있습니다.
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> <script> functionize () {var mapprop = {center : new Google.maps.latlng (51.508742, -0.120850), Zoom : 7, MapTypecontrol : true, mapTypecontroloptions : {style : google.maps.maptypecontrolstyle.dropdown_menu}, maptypeid : google.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ( "googlemap"), mapProp);} google.maps.event.adddomListener (Wind또한 제어 속성을 사용하여 컨트롤의 위치를 지정할 수 있습니다.
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false"> <script> functionize () {var mapprop = {center : new Google.maps.latlng (51.508742, -0.120850), Zoom : 7, MapTypecontrol : true, mapTypecontroloptions : {style : google.maps.maptypecontrolstyle.dropdown_menu, 위치 : Google.maps.controlposition.top_center}, mapTypeid : google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ( "googlemap"), mapProp);} google.maps.event.adddomListener (WindGoogle지도 - 사용자 정의 제어 세트
이벤트를 클릭하기 위해 런던으로 돌아갈 맞춤 컨트롤을 만듭니다.
예
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoyym&sensor=false "> <script> var Map; Var London = New google.maps.latlng (51.508742, -0.120850); // 런던 기능 홈런 (controldiv, map) {controldiv.style.padding = '5px'; var controlUi = document.createElement ( 'div'); ControlUi.style.backgroundColor = 'Yellow'; ControlUi.style.border = '1px solid'; ControlUi.style.cursor = '포인터'; ControlUi.style.textalign = 'Center'; ControlUi.title = ''런던에지도 설정 '; Controldiv. AppendChild (ControlUi); var controlText = document.createElement ( 'div'); ControlText.style.fontFamily = 'Arial, Sans-Serif'; ControlText.style.fontsize = '12px'; ControlText.style.paddingleft = '4px'; ControlText.style.paddingright = '4px'; ControlText.innerhtml = '<b> home <b>'ControlUi.appendChild (ControlText); // Click-Event Listener 설정 : Map를 London Google.maps.event.event.AddDomListener (ControlUi, 'Click', function () {map.setCenter (LOMNE)});} function initialize () {var mapDiv = document.getElemAp ')로 간단히 설정합니다. var myoptions = {Zoom : 12, Center : London, MapTypeid : Google.maps.maptypeid.roadmap} map = new Google.maps.map (mapdiv, myoptions); // 컨트롤을 보유하고 homecontrol () var homecontroldiv = document.createElement ( 'div'); var homecontrol = new homecontrol (homecontroldiv, map); // homecontroldiv.index = 1; map.controls [google.maps.controlposition.top_right] .push (homecontroldiv);} google.maps.event.adddomlistener (Wind위는 Google지도 제어 세트를 정렬하는 정보입니다. 우리는 향후 관련 지식을 계속 추가 할 것입니다. Google지도 애플리케이션을 개발하는 데 도움을 줄 수있는 친구들이 있기를 바랍니다. 이 사이트를 지원 해주셔서 감사합니다!