Google 매핑 기본 사항
간단한 Google지도를 만듭니다
이제 간단한 Google지도를 만들어 봅시다.
영국 런던을 보여주는 Google지도는 다음과 같습니다.
예
<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 : 5, MapTypeid : Google.maps.maptypeid.roadmap}; var map = new Google.maps.map (getelementByid ( "googlemap"), mapprop); 초기); </script> </head> <bod> <div id = "googlemap"> </div> </body> </html>예제 렌더링 (직접 복사 및 실행할 수 있습니다. 물론 Google에 액세스 할 수 있어야합니다).
예제 분석
위의 예제를 사용하여 Google지도의 생성 프로세스를 분석합니다.
응용 프로그램이 HTML5를 선언하는 이유는 무엇입니까?
<! doctype html>
대부분의 브라우저는 "표준 모드"HTML5 문서 렌더링 페이지를 사용하므로 응용 프로그램은 주요 브라우저와 호환됩니다.
또한 DocType 태그가없는 경우 브라우저는 Quirks 모드를 사용하여 페이지 컨텐츠를 렌더링합니다.
팁 : 일부 "무차별 모드"CSS는 표준 모드에서 사용할 수 없습니다. 특정 응용 분야에서 모든 백분율 기반 크기는 상위 블록 요소에서 상속되어야합니다. 상위 모듈에 크기가 지정되지 않으면 기본값은 0 x 0 픽셀입니다. 백분율을 사용하려면 다음과 같이 <style> 태그로 선언 할 수 있습니다.
<스타일 유형 = "text/css"> html {높이 : 100%} 바디 {높이 : 100%; 마진 : 0; 패딩 : 0} #googlemap {높이 : 100%} </style>이 스타일 문은 MAP 모듈 (GOOGLEMAP)의 HTML 높이가 100%여야 함을 나타냅니다.
Google Maps API 키를 추가하십시오
Google Maps API는 다음 예제의 첫 번째 <cript> 태그에 포함되어야합니다.
<script src = "http://maps.googleapis.com/maps/api/jske=your_api_key&sensor=true_or_false"> </script>
Google에서 생성 된 API 키를 키 매개 변수 (key = Your_api_key)에 배치하십시오.
센서 매개 변수가 필요하므로 응용 프로그램이 사용자의 위치를 찾기 위해 센서 (GPS 탐색과 유사)를 사용하는지 여부를 나타냅니다. 매개 변수 값은 true 또는 false로 설정할 수 있습니다.
HTTPS
응용 프로그램이 보안 HTTP (HTTPS : HTTP Secure) 응용 프로그램 인 경우 HTTPS를 사용하여 Google Maps API를로드 할 수 있습니다.
<script src = "https://maps.googleapis.com/maps/api/jsko=your_api_key&sensor=true_or_false"> </script>
비동기 적재
마찬가지로 페이지가 완전히로드 된 후 Google Maps API를로드 할 수 있습니다.
다음 예제는 Window.onload를 사용하여 Google지도의 전체로드를 달성합니다. loadScript () 함수는로드 Google 맵 API <Script> 태그를 만듭니다. 또한 콜백 = 초기화 매개 변수가 태그 끝에서 추가됩니다. API가 완전히로드 된 후 콜백 함수가 실행됩니다.
예
<! docType html> <html> <head> <cript> function initialize () {var mapprop = {center : new Google.maps.latlng (51.508742, -0.120850), Zoom : 7, maptypeid : google.maps.maptypeid.roadmap}; var map = new Google.maps.map (document.getElementById ( "googlemap"), mapProp);} function loadscript () {var script = document.createElement ( "script"); script.type = "text/javaScript"; script.src = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false&callback=initialize"; document.body.appendChild (script);} window.onload = loadscript; </script> </head> <hod> <div id = "googlemap"> </div> </body> </html>맵 속성을 정의합니다
지도를 초기화하기 전에 맵 속성을 정의하려면 맵 속성 객체를 작성해야합니다.
var mapprop = {Center : New Google.maps.latlng (51.508742, -0.120850), Zoom : 7, MapTypeid : Google.maps.maptypeid.roadmap};중앙 (중앙 지점)
중앙 속성은지도의 중심을 지정하여 좌표 (위도, 경도)를 통해 맵의 중심점을 만듭니다.
줌 (Zoom Series)
줌 속성은 맵의 줌 범위를 지정합니다. Zoom : 0은 전체 지구지도의 전체 줌을 보여줍니다.
MapTypeid (맵의 초기 유형)
MapTypeid 속성은 맵의 초기 유형을 지정합니다.
MapTypeid에는 다음 4 가지 유형이 포함됩니다.
google.maps.maptypeid.hybrid : 위성 이미지를 표시하는 메인 스트리트 투명 레이어
google.maps.maptypeid.roadmap : 일반 거리지도를 보여줍니다
Google.maps.maptypeid.satellite : 위성 이미지를 표시합니다
google.maps.maptypeid.terrain : 지형 및 식생과 같은 자연적인 특징을 가진지도를 보여줍니다.
Google지도를 표시 할 위치
일반적으로 Google지도는 <div> 요소로 사용됩니다.
<div id = "googlemap"> </div>
참고 : 맵은 div에있는 크기가 설정된 맵의 크기를 표시하므로 <div> 요소에서 맵의 크기를 설정할 수 있습니다.
맵 객체를 만듭니다
var map = new Google.maps.map (Document.GetElementById ( "GOOGLEMAP"), MAPPROP);
위의 코드는 매개 변수 (mapprop)를 사용하여 <div> 요소 (id is googlemap)에서 새 맵을 만듭니다.
팁 : 페이지에서 여러 맵을 만들려면 새 맵 객체를 추가하면됩니다.
다음 예제는 4 개의 맵 인스턴스를 정의합니다 (4 개의 맵은 다른 맵 유형을 사용합니다).
예
<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 : 9, MapTypeid : Google.maps.maptypeid.roadmap}; var mapprop2 = {Center : New Google.maps.latlng (51.508742, -0.120850), Zoom : 9, MapTypeid : Google.maps.maptypeid.satellite}; var mapprop3 = {Center : New Google.maps.latlng (51.508742, -0.120850), Zoom : 9, MapTypeid : Google.maps.maptypeid.hybrid}; var mapprop4 = {Center : New Google.maps.latlng (51.508742, -0.120850), Zoom : 9, MapTypeid : Google.Maps.MapTypeid.terrain}; var map = new Google.maps.map (Document.GetElementById ( "GOOGLEMAP"), MAPPROP); var map2 = new Google.maps.map (Document.GetElementById ( "GOOGLEMAP2"), MAPPROP2); var map3 = new Google.maps.map (Document.GetElementById ( "GOOGLEMAP3"), MAPPROP3); var map4 = new Google.maps.map (Document.GetElementById ( "GOOGLEMAP4"), MAPPROP4);} Google.maps.event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.Event.event.event.event.event.event.event.event.event.event.event.event id = "googlemap3"> </div> <br> <div id = "googlemap4"> </div> </body> </html>지도를로드합니다
창이로드되면 MAP 객체는 초기화 () 함수를 실행하여 초기화되어 페이지가 완전히로드 된 후 Google지도가로드되도록합니다.
google.maps.event.adddomListener (창, '로드', 초기화);
위는 Google지도의 기본 정보를 편집 한 것입니다. 나중에 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!