geocoding은 gmaps.js의 geocode () 메소드를 사용하여 달성 할 수 있습니다. 마찬가지로 geolocate () 메소드는 사용자의 현재 지리적 위치를 계산하는 데 사용될 수 있습니다.
<..> gmaps.js는 또한 이벤트를 지원하므로 개발자가 더블 클릭 또는 마우스 오버와 같은 맵을 통해 특정 이벤트 발생에 대한 기능을 호출 할 수 있습니다.
Google은 API 및 GMAPS 를지도합니다
Google은 2005 년에 Google Maps API를 도입했습니다.이를 통해 개발자는 맵을 사용하여 사용자 정의 응용 프로그램을 만들 수있었습니다. 그 후 Google은 Android 및 iOS 응용 프로그램 개발 용 API를 출시했습니다.
지도 API만큼 유용한 경우, 약간의 지식을 사용하여 활용합니다. 그곳에서 gmaps.js가 들어오는 곳입니다. gmaps.js는 오픈 소스, MIT-Licence JavaScript 라이브러리입니다. Gustavo Leon이 작성한 GMAPS는 원래 Google Maps JavaScript API를 단순화하는 것을 목표로합니다. 광범위한 API 코드를 관리하고지도를 처리하기위한 적절한 방법을 제공합니다. 더 깨끗하고 간결하며 사용하기가 더 쉽습니다.
이 기사에서는 마커, 다각형 및 오버레이와 같은지도 구성 요소를 살펴 보겠습니다. 또한 정적 맵과 지리적 위치 및 지오 코딩을 사용하여 사용자의 위치에서 작동합니다. 이 모든 것은 GMAP를 참조합니다. 사용하기 쉬운 방법으로 MAP 응용 프로그램을 만드는 데 도움이됩니다. 샘플 응용 프로그램 (MAPIT)을 만들기 위해 사용했는데 기사 끝에서 더 자세히 논의 할 것입니다.
Google API 및 GMAPS 비교
아래의 예는 원본 문서 페이지에서 나온 것입니다. 코드 (JavaScript 만)는 위도 -34.397 및 경도 150.644의 중심으로 맵을로드하고 줌 레벨은 8 :
입니다.
맵은 맵이로드되는 HTML 요소 ID입니다.
우리는 다음과 같은 gmaps로 동일한 기본 앱을 쓸 수 있습니다.<span>var map;
</span><span>function initMap() {
</span> map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span> <span>center: {lat: -34.397, lng: 150.644},
</span> <span>zoom: 8
</span> <span>});
</span><span>}</span>
이 튜토리얼은 맵에서 가장 많이 사용되는 구성 요소 중 일부를 안내하며, 예제 펜은 각각을 보여줍니다.
시작하기
기본 HTML 페이지를 작성하고 맵 API에 대한 참조를 추가하십시오. GMAPS 라이브러리도 포함해야합니다. gmaps로 이동하여 gmaps.js를 다운로드하십시오. 웹 페이지에 포함 시키면 좋습니다.
이것은 아래의 스 니펫에서 참조 할 초래 페이지입니다. 이 예제 중 일부에서는 맵 객체가 수정됩니다.
구성 요소
맵 API는 맵을 사용자 정의하기위한 다양한 구성 요소를 제공합니다. 코드가 적은 gmaps로 동일한 구성 요소를 추가 할 수 있습니다. <span>new GMaps({
</span> <span>el: '#map',
</span> <span>lat: -34.397,
</span> <span>lng: 150.644,
</span> <span>zoom: 8
</span><span>});</span>
이벤트
html dom (문서 개체 모델)의 변경은 이벤트로 설명 될 수 있습니다. 맵을 통해 특정 이벤트가 발생하는 경우 (두 번 클릭 또는 마우스 오버)를 호출 할 수 있습니다. 다음 스 니펫은 클릭 및 Zoom_Changed 이벤트의 함수를 정의합니다.
원하는 경우 다른 이벤트를 추가 할 수 있습니다. 모든 맵 이벤트 목록은
이벤트 섹션에서 제공됩니다. 유용한 것 중 일부는 다음과 같습니다.
이벤트
설명
dblclick
더블 마우스 클릭
마우스 오버
마우스는 맵을 입력합니다
마우스 아웃
마우스는 맵을 종료합니다
견인
지도가 드래그됩니다
오른쪽 클릭하십시오
오른쪽 마우스 클릭
예제 펜
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>#map</span> {
</span></span></span><span><span> <span>width: 400px;
</span></span></span><span><span> <span>height: 400px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span> <span><span><span></head</span>></span>
</span> <span><span><span><body</span>></span>
</span> <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
<span><!-- Google Maps JS API -->
</span> <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span> <span><!-- GMaps Library -->
</span> <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span>></span><span>
</span></span><span><span> <span>/* Map Object */
</span></span></span><span><span> <span>var mapObj = new GMaps({
</span></span></span><span><span> <span>el: '#map',
</span></span></span><span><span> <span>lat: 48.857,
</span></span></span><span><span> <span>lng: 2.295
</span></span></span><span><span> <span>});
</span></span></span><span><span> </span><span><span></script</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span> 마커
마커는지도의 로케이터입니다. 일반적으로 표시된 위치에 매달려있는 풍선으로 표시됩니다. GMAPS는 마커를 추가하기 위해 AddMarker () 메소드를 제공합니다. 마커에 대한 다음 속성을 가진 객체 문자 그대로 수용합니다.
위도 : 위도
<: :> lng : 경도
제목 : 마우스 오버에 표시된 제목
아이콘 : 마커에 대한 사용자 정의 이미지
세부 사항 : 추가 데이터가있는 사용자 정의 객체
infowindow : 마커 에 대한 정보
이 중 LAT 및 LNG에 값을 할당 해야하는 반면 다른 하나는 선택 사항입니다. Infowindow의 가치는 다른 대상이어야합니다. 이 객체 자체에는 다음과 같은 속성이 있습니다
컨텐츠 : HTML 컨텐츠
maxwidth : 창의 최대 너비. 설정하지 않으면 창문이 텍스트의 길이에 걸쳐 있습니다.
Infowindow는 몇 가지 옵션을 더 지원합니다
이 스 니펫은 addmarker ()의 유효한 예입니다
addmarker ()도 이벤트를 수락합니다 - 예를 들어 마우스 오버 이벤트에 반응하는 마커 :
예제 펜
removeMarker () 메소드를 사용하여 마커를 제거 할 수 있습니다. 마커 객체를 인수로 (M)에 전달하십시오.
removeMarkers ()는지도 객체와 관련된 모든 마커를 집합 적으로 제거합니다.<span>var map;
</span><span>function initMap() {
</span> map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span> <span>center: {lat: -34.397, lng: 150.644},
</span> <span>zoom: 8
</span> <span>});
</span><span>}</span>
지오 코딩
지도의 지점을 찾으려면 지리적 좌표가 필요합니다 ( 위도 및 경도 ). 지오 코딩은 주어진 위치 주소에서 이러한 지리적 좌표를 계산합니다. GeoCode () 메소드를 사용하면 동일한 작업을 수행 할 수 있습니다. 위치 주소를 입력으로 사용하고 해당 주소에 대한 프로세스 좌표.
.
주소 : 위치 주소 문자열
콜백 : 지오 코딩 후 호출 된 함수
영국
에 위치한 Stonehenge 의 위도와 경도를 계산해 봅시다. 아래 스 니펫은 주어진 주소의 지리적 좌표를 계산하고 해당 위치에지도를 중앙에 놓습니다. 결과가 없으면 메시지가 표시됩니다
setCenter () 메소드는 매개 변수와 해당 지리적 위치에 맵을 중심으로 위도와 경도를 취합니다. 또한 옵션 콜백 매개 변수를 허용하고 맵이 중앙에있는 후 트리거 된 함수.
결과는 객체 배열로 정의 된 주소가있는 모든 장소의 위치를 저장합니다. 동일한 이름을 가진 둘 이상의 장소가있을 수 있으므로 결과가 둘 이상있을 수 있습니다. 결과는 각각을 저장합니다. i 결과의 위치는 결과 [i] .geometry.location. 를 사용하여 결정할 수 있습니다.
주소에 대한 결과가 없으면 상태 저장소 Zero_results , 그렇지 않으면 ok .
예제 펜
지리적 위치
지리적 위치는 사용자의 현재 지리적 위치를 계산합니다. geolocate () 메소드를 사용하면이 기능을 악용 할 수 있습니다. 그것은 4 개의 속성을 가진 객체 문자 그대로 수용하며, 그 중 항상 선택 사항이며 다른 모든 것이 필요합니다. 각 속성은 특정 경우에 실행되는 함수로 정의됩니다.
성공 : 지리적 위치는 성공적이었습니다
오류 : 지리적 위치는 성공하지 못했습니다
not_supported : 브라우저는 지리적 위치 <span>new GMaps({
</span> <span>el: '#map',
</span> <span>lat: -34.397,
</span> <span>lng: 150.644,
</span> <span>zoom: 8
</span><span>});</span>를 지원하지 않습니다
항상 항상 : 모든 경우에 실행
예제 펜
폴리 라인
폴리 라인은지도에서 경로를 추적하는 데 도움이됩니다. 다른 지점의 좌표를 결합하여 경로를 형성 할 수 있습니다. DrawPolyline () 메소드는 경로에 대한 폴리 라인을 그립니다. 이 경로는 일련의 좌표 ( latitude
및 경도 )로 제공됩니다. 경로 외에도 폴리 라인의 다른 속성을 지정할 수 있습니다. 그들 중 일부는 다음과 같습니다
스트로크 웨이트
스트로크 콜러
스트로크 오피 수신
세 가지 모두 폴리 라인의 스타일을 정의합니다. 이 기사에서는 다루지 않지만 다른 사람들도 있습니다.
예제 펜
> removePolyline () 메소드를 사용하여 폴리 라인을 제거 할 수 있습니다. 폴리 라인 객체를 매개 변수로 사용합니다. 다음을 사용하여 PL 폴리 인을 제거하십시오<span>var map;
</span><span>function initMap() {
</span> map <span>= new google<span>.maps.Map</span>(document.getElementById('map'), {
</span> <span>center: {lat: -34.397, lng: 150.644},
</span> <span>zoom: 8
</span> <span>});
</span><span>}</span>
removepolylines ()는 맵 객체와 관련된 모든 폴리 라인을 제거합니다.
다각형
drawPolygon ()은지도에서 다각형을 만드는 데 도움이됩니다. DrawPolyline () 메소드와 거의 비슷하게 경로 속성을 정의해야합니다. 뇌졸중 스타일 특성 (뇌졸중, 뇌졸중 및 뇌졸중)도 다각형의 작업도 있습니다. 그들은 다각형의 경계를 정의합니다. 이 외에도 다각형의 채우기 색상과 불투명도를 지정할 수 있습니다.
<span>new GMaps({
</span> <span>el: '#map',
</span> <span>lat: -34.397,
</span> <span>lng: 150.644,
</span> <span>zoom: 8
</span><span>});</span>
fillColor
fillopacity
다른 다각형 옵션은 문서에서 찾을 수 있습니다
기억 : DrawPolyline () 및 DrawPolygon ()의 경로 속성의 경로 속성입니다.
예제 펜
다각형 pg를 제거하려면 를 사용하십시오
mapobj에 정의 된 모든 다각형을 제거하십시오
원
DrawPolygon ()로 원형 모양을 만드는 것은 실용적이지 않습니다. DrawCircle ()이 당신을 도와줍니다. 매개 변수 목록에는 다음이 포함됩니다
위도 : 센터의 위도
<: :> lng : 센터의 경도
반경 : 지구 표면의 미터 반경.
다른 옵션에는 뇌졸중을위한 스타일과 모양의 채우기 (다각형과 동일)가 포함됩니다.
예제 펜
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span> <span><span><span><head</span>></span>
</span> <span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>#map</span> {
</span></span></span><span><span> <span>width: 400px;
</span></span></span><span><span> <span>height: 400px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span> <span><span><span></head</span>></span>
</span> <span><span><span><body</span>></span>
</span> <span><span><span><div</span> id<span>="map"</span>></span><span><span></div</span>></span>
</span>
<span><!-- Google Maps JS API -->
</span> <span><span><span><script</span> src<span>="https://maps.googleapis.com/maps/api/js"</span>></span><span><span></script</span>></span>
</span> <span><!-- GMaps Library -->
</span> <span><span><span><script</span> src<span>="gmaps.js"</span>></span><span><span></script</span>></span>
</span> <span><span><span><script</span>></span><span>
</span></span><span><span> <span>/* Map Object */
</span></span></span><span><span> <span>var mapObj = new GMaps({
</span></span></span><span><span> <span>el: '#map',
</span></span></span><span><span> <span>lat: 48.857,
</span></span></span><span><span> <span>lng: 2.295
</span></span></span><span><span> <span>});
</span></span></span><span><span> </span><span><span></script</span>></span>
</span> <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span> 오버레이
오버레이는 HTML 컨텐츠가있는지도 위의 레이어입니다. GMAPS는 DrawOverLay () 메소드를 사용하여 오버레이를 지원합니다. 다음 해시를 받아들입니다
위도 : 위도
<: :> lng : 경도
컨텐츠 : HTML 컨텐츠
verticalalign : 상단, 중간, 하단
horizontalalgin : 왼쪽, 중간, 오른쪽
verticalOffset
HorizontalOffset
정렬 및 오프셋은 LAT 및 LNG에 의해 정의 된 지점과 관련이 있습니다.
예제 스 니펫 :
컨텐츠에 대한 CSS 스타일을 정의 할 수 있습니다. 이 예에서는 오버레이 클래스를 정의했습니다
<span>var mapObj = new GMaps({
</span> <span>el: '#map',
</span> <span>lat: 48.857,
</span> <span>lng: 2.295,
</span> <span>click: function(e) {
</span> <span>alert('You clicked on the map');
</span> <span>},
</span> <span>zoom_changed: function(e) {
</span> <span>alert('You zoomed the map');
</span> <span>}
</span><span>});</span>
예제 펜
> 오버레이 제거? 글쎄, 당신은 그것을 알고 있습니다 : <span>var m = mapObj.addMarker({
</span> <span>lat: 48.8583701,
</span> <span>lng: 2.2944813,
</span> <span>title: 'Eiffel Tower',
</span> <span>infoWindow: {
</span> <span>content: '<h4>Eiffel Tower</h4><div>Paris, France</div>',
</span> <span>maxWidth: 100
</span> <span>}
</span><span>});</span>
지도 객체의 모든 오버레이를 제거 하시겠습니까? 당신도 그것을 알고 있습니다 :
정적 맵
정적지도는지도의 이미지로, 독립적으로 웹 사이트에 포함될 수 있습니다. GMAPS를 사용하면 정적 맵에 URL을 생성 할 수 있습니다. 이 URL은 이미지에 소스로 추가 될 수 있습니다.
staticMapurl () 다음 매개 변수를 찍은 후 필요한 맵 URL을 생성합니다.
크기 : 픽셀의 너비와 높이
lat
lng
ZOOM
코드 스 니펫 :
예제 펜
이 예에서는 IMG 요소를 만들고 SRC에 URL을 추가했습니다.
mapObj<span>.addMarker({
</span> <span>lat: 48.8583701,
</span> <span>lng: 2.2944813,
</span> <span>mouseover: function(e) {
</span> <span>alert('Triggered');
</span> <span>}
</span><span>});</span>
우리는 마커와 폴리 라인을 정적 맵에도 적용 할 수 있습니다.
예제 펜 샘플 애플리케이션 (Mapit)
MAPIT (GitHub의 뷰 소스)는 소스와 대상 사이의 경로에 대한 정적 맵을 만듭니다. 지도의 주소로 확대하고 두 마커 (소스 및 대상)를 배치하십시오. Mapit은 한 마커에서 다른 마커로 경로를 추적합니다. 현재 구성으로 정적 맵에 대한 URL을 만듭니다. 정적 맵을 미리보기하고 이미지를 다운로드 할 수 있습니다.
결론
이 기사는 맵의 기본 구성 요소를 다룹니다. GMAP 및 대화식지도 응용 프로그램에 대한 좋은 시작 안내서로 사용되었다고 확신합니다. 그러나 여기서 멈추지 않아야합니다. gmapsjs로 할 수있는 더 많은 것이 있습니다.
아직 gmaps를 사용 했습니까? 그렇다면, 당신의 경험은 무엇입니까? 의견이나 질문이 있으시면 아래 토론에 참여하십시오.
gmaps.js 가있는 Google지도에 대한 자주 묻는 질문 (FAQ)
gmaps.js를 시작하려면 어떻게해야합니까? gmaps.js를 시작하려면 먼저 HTML 파일에 Google지도 JavaScript API를 포함시켜야합니다. 그런 다음 gmaps.js 라이브러리를 포함하십시오. 공식 Github 저장소에서 다운로드하거나 CDN을 사용할 수 있습니다. 이 스크립트를 포함 시키면 새 GMAPS 객체를 작성하고 맵을 표시하려는 HTML 요소의 ID를 전달하여 센터의 위도 및 경도와 같은 일부 옵션과 함께 새 맵을 초기화 할 수 있습니다.
gmaps.js의 주요 기능은 무엇입니까? gmaps.js는 Google지도와의 작업 프로세스를 단순화합니다. 지도를 만들고 조작하기위한 간단하고 직관적 인 API를 제공합니다. 주요 기능에는 마커, 다각형 및 층, 지리 위치, 지오 코딩 등을 쉽게 추가 할 수있는 기능이 포함됩니다. 또한 클릭 또는 드래그와 같은 사용자 상호 작용에 응답 할 수있는 이벤트를 지원합니다. gmaps.js를 사용하여 맵에 마커를 추가 할 수있는 방법은 무엇입니까? .js는 간단합니다. GMAPS 객체에서 Addmarker 메소드를 사용할 수 있으며 마커의 위도와 경도가있는 물체를 전달할 수 있습니다. 제목, 클릭 이벤트 등과 같은 다른 옵션을 포함 할 수 있습니다. gmaps.js와 함께 지리적 위치를 어떻게 사용할 수 있습니까? 사용자의 현재 위치를 얻으십시오. 이 방법은 사용자의 위도 및 경도로 해결되는 약속을 반환합니다. 그런 다음이 정보를 사용하여 사용자의 위치에 맵을 중앙에 놓거나 해당 위치에 마커를 추가 할 수 있습니다.
gmaps.js를 사용하여 지오 코딩을 어떻게 사용할 수 있습니까? 지리적 좌표로의 주소는 마커를 배치하거나 맵을 배치하는 데 사용할 수 있습니다. gmaps.js는 주소를 취하고 지오 코드 결과를 해결하는 약속을 반환하는 지오 코드 방법을 제공합니다. gmaps.js를 사용하여 맵에 이벤트를 추가하려면 어떻게해야합니까? gmaps.js를 사용하여 맵에 레이어를 추가 할 수 있습니까? ?
gmaps.js는 트래픽, 대중 교통 및 자전거 레이어를 포함한지도에 다양한 유형의 레이어를 추가하는 것을 지원합니다. gmaps 객체에서 addlayer 메소드를 사용하여 레이어 이름을 전달하여 레이어를 추가 할 수 있습니다. gmaps.js를 사용한지도에서 모양을 어떻게 그리는가? 선, 다각형, 원 및 사각형을 포함하여지도에 다양한 모양을 그리는 방법을 제공합니다. GMAPS 개체에서 DrawOverLay, DrawPolygon, DrawCircle 및 DrawRectangle 메소드를 사용할 수 있습니다. GMAPS.js를 사용하여 맵의 모양을 사용자 정의하는 방법? 스타일을 사용하여지도의 모양을 사용자 정의하십시오. GMAPS 객체를 만들 때 스타일 옵션을 전달할 수 있습니다. 맵의 다른 요소를 어떻게 스타일링 해야하는지 설명하는 스타일의 배열이어야합니다.
gmaps.js를 사용하여 오류를 어떻게 처리 할 수 있습니까? 🎜> gmaps.js는 라이브러리를 사용할 때 발생하는 오류를 처리하는 방법을 제공합니다. GMAPS 객체에서 '오류'이벤트를들을 수 있으며 오류가 발생할 때마다 트리거됩니다. 이벤트 객체에는 메시지 및 스택 추적을 포함하여 오류에 대한 정보가 포함됩니다.
