Google Maps API 및 JQuery 기사를 사용하여 맵에 마커 추가

Google지도 코드의 경우 Google 서버에 직접 연결할 수 있습니다. 센서 = 거짓 매개 변수는 사용자의 위치를 ​​결정하기 위해 센서 (GPS 로케이터와 같은)를 사용하지 않도록 지정합니다. 이제 기본 라이브러리가 있으므로 기능 구축을 시작할 수 있습니다. 스크립트를 요약 한 지도 코드의 골격부터 시작하겠습니다 : 우리는 MyMap이라는 JavaScript 객체 내부에 모든 맵 기능을 포장하여 페이지의 다른 스크립트와의 잠재적 충돌을 피하는 데 도움이됩니다. 객체에는 두 가지 변수와 두 가지 함수가 포함되어 있습니다. 맵 변수는 우리가 만든 Google지도 객체에 대한 참조를 저장하고 Bounds 변수는 모든 마커가 포함 된 경계 상자를 저장합니다. 이것은 우리가 모든 마커를 추가 한 후에도 맵을 동시에 볼 수 있도록 맵을 확대하려고 할 때 유용합니다.

. 이제 방법의 경우 : Init는 페이지에서 요소를 찾아 주어진 센터 및 줌 레벨로 새로운 Google지도로 초기화합니다. 한편 PlaceMarkers는 XML 파일의 이름을 가져 와서 해당 파일의 좌표 데이터로로드하여 맵에 일련의 마커를 배치합니다.

이제 우리는 기본 구조를 갖추 었으므로 init 기능을 작성해 봅시다 :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

따라서이 함수가 실행되면 우리는 우리는 " ll 우리의지도를 페이지에 표시하고 빈 경계 상자가있어 마커를 추가 할 때 확장 할 준비가되었습니다. 마커 추가 말하기, Placemarkers 기능을 살펴 보자.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

이 기능은 조금 더 복잡하지만 이해하기 쉽습니다. 먼저 ajax get request를 실행하기 위해 jQuery의 $ .get 메소드를 호출합니다. 이 메소드는 요청할 URL (이 경우 로컬 XML 파일)과 요청이 끝날 때 실행할 콜백 함수의 두 매개 변수를 취합니다. 그 기능은 차례로 요청에 대한 응답이 전달 될 것입니다.이 경우 XML이됩니다.

jQuery는 XML을 HTML과 정확히 동일하게 처리하므로 $ (xml) .find ( 'Marker')를 사용하여 각 (…)를 응답 XML에서 각 마커 요소 위에 루프하고 맵에서 마커를 만듭니다. 각각.

우리는 마커의 이름과 주소를 잡고 각각에 대한 새로운 latlng 객체를 만듭니다. 우리는 그 지점을 포함하도록 경계 상자를 확장 한 다음지도에서 그 위치에 마커를 만듭니다. 우리는 사용자가 해당 마커를 클릭 할 때마다 툴팁 버블이 나타나고 위치의 이름과 주소를 포함하기를 원합니다. 따라서 MAPS API 이벤트를 사용하여 각 마커에 이벤트 리스너를 추가해야합니다. 그러나 그렇게하기 전에 툴팁 자체를 만들 것입니다. Google Maps API 에서이 유형의 툴팁을 Infowindow라고합니다. 그래서 우리는 새로운 Infowindow를 만들고 필요한 정보로 채우기 위해 HTML을 설정했습니다. 그런 다음 이벤트 리스너를 추가합니다. 마커 중 하나를 클릭 할 때마다 청취자가 발사되고, 둘 다 Infowindow의 내용을 설정하고 맵에서 볼 수 있도록 열 수 있습니다.

. 마지막으로, 모든 마커와 관련 이벤트 핸들러 및 InfoWindows를 추가 한 후 맵을 API의 FitBounds 메소드를 사용하여 마커에 맵을 장착합니다. 우리가 통과 해야하는 것은 각 마커를 포함하도록 확장 한 바운드 객체입니다. 이런 식으로, 맵이 확대되거나 팬드되었는지에 관계없이 항상 모든 마커를 포함하는 이상적인 줌 레벨로 다시 돌아갑니다. 모두 함께 묶어

이제 우리의 코드가 준비되었으므로 행동에 적용합시다. 우리는 jquery의 $ ( 'document')를 사용합니다. 페이지가로드 될 때까지 기다릴 준비가 된 다음 맵을 초기화하여 #map selector 문자열을 사용하여 맵의 ID를 사용하여 페이지 요소를 지적합니다. <p> <a> 우리는 또한 #showmarkers 버튼에 클릭 이벤트 리스너를 첨부합니다. 해당 버튼을 클릭하면 XML 파일에 URL을 사용하여 PlaceMarkers 기능을 호출합니다. 스핀을 주면지도에 맞춤 마커 세트가 나타나는 것을 볼 수 있습니다. </a></p> 요약 <p> </p> 아마도 Google지도 API에 어떤 것보다 더 많은 것이 있다고 생각했을 것입니다. 우리는 여기서 다루었으므로 가능한 모든 것에 대한 느낌을 얻으려면 문서를 확인하십시오.이 게시물을 읽는 것을 좋아한다면 Learnable을 좋아할 것입니다. 주인으로부터 신선한 기술과 기술을 배울 수있는 곳. 회원은 jQuery 기초와 같은 모든 SitePoint의 모든 eBook 및 대화식 온라인 과정에 즉시 액세스 할 수 있습니다. <questions> jQuery 가있는 Google지도 API에 대한 자주 묻는 질문 (FAQ) <integr> Google Maps API를 jQuery와 통합하려면 어떻게해야합니까? <h3> jQuery와 Google Maps API를 통합하는 데 몇 단계가 필요합니다. 먼저 HTML 파일에 Google Maps API 스크립트를 포함해야합니다. 그런 다음 JavaScript 파일에서 맵을 초기화해야합니다. jQuery를 사용하여 맵을 표시하려는 HTML 요소를 선택할 수 있습니다. 그런 다음 Google Maps API 메소드를 사용하여 필요에 따라 맵을 사용자 정의 할 수 있습니다. 스크립트 태그에서 'Your_api_key'를 실제 API 키로 바꾸는 것을 잊지 마십시오. </h3> Google Maps API 및 JQuery를 사용하여 표시되는 맵을 사용자 정의하려면 어떻게해야합니까? <p> </p> Google Maps API는 사용자 정의 할 몇 가지 옵션을 제공합니다. 지도. 줌 레벨을 설정하고 특정 위치에 맵을 중앙으로 설정하고 표시 할 맵 유형을 선택할 수 있습니다. 마커, 정보 창 및 이벤트 리스너를지도에 추가 할 수도 있습니다. 이러한 모든 사용자 정의는 맵을 초기화하는 JavaScript 파일에서 수행 할 수 있습니다. <h3> 맵에 마커를 추가하려면 어떻게해야합니까? </h3> <p> 맵에 마커를 추가하려면 Google의 새 인스턴스를 작성하는 것이 포함됩니다. .maps.marker 클래스 및 생성자의 위치 및 맵 옵션을 지정합니다. 위치 옵션은 마커의 지리적 좌표를 나타내는 google.maps.latlng 객체 여야합니다. 맵 옵션은 마커가 표시되어야하는 맵을 나타내는 Google.maps.map 객체 여야합니다. </p> 마커에 정보 창을 추가 할 수 있습니까? <h3> </h3> 정보 창을 추가 할 수 있습니다. Google.maps.infowIndow 클래스의 새 인스턴스를 생성하고 생성자에서 컨텐츠 옵션을 지정하여 마커입니다. 컨텐츠 옵션은 정보 창에 표시 할 HTML 컨텐츠를 나타내는 문자열이어야합니다. 그런 다음 마커가 클릭 될 때 정보 창을 표시하기 위해 정보 창 객체의 열린 메소드를 사용하여 정보 창을 표시 할 수 있습니다. <p> 이벤트 리스너를 마커에 추가 할 수 있습니까? </p> <h3> 이벤트 리스너가 될 수 있습니다. Google.maps.event 클래스의 AddListener 메소드를 사용하여 마커에 추가되었습니다. AddListener 메소드의 첫 번째 인수는 마커 객체, 두 번째 인수는 이벤트의 이름이어야하며, 세 번째 인수는 이벤트가 발생할 때 실행될 기능이어야합니다. 표시되는 맵 유형? </h3> <p> 맵 객체의 MapTypeid 옵션을 설정하여 표시된 맵 유형을 변경할 수 있습니다. MapTypeid 옵션은 Google.maps.maptypeid.roadmap, google.maps.maptypeid.satellite, google.maps.maptypeid.hybrid 또는 google.maps.maptypeid.terrain.<set> 맵의 줌 레벨을 설정하려면 맵의 줌 옵션을 설정하여 맵의 줌 레벨을 설정할 수 있습니다. 줌 옵션은 줌 레벨을 나타내는 숫자 여야합니다. 숫자가 높을수록 확대 / 축소가 가까워집니다. <h3> 특정 위치에서지도를 중앙에있는 방법은 무엇입니까? </h3> 맵의 중심 옵션을 설정하여 맵을 특정 위치에 중앙에 놓을 수 있습니다. 물체. 센터 옵션은 위치의 지리적 좌표를 나타내는 google.maps.latlng 객체 여야합니다. <p> Google지도의 API 키를 얻는 방법 </p> <h3> Google지도의 API 키는 어떻게 할 수 있습니까? Google Cloud 플랫폼 콘솔에서 얻을 수 있습니다. 새 프로젝트를 작성하고 Google지도 JavaScript API를 활성화하고 새 API 키를 생성해야합니다. </h3> Google Maps API에서 오류를 처리 할 수 ​​있습니까? Google.maps.event 클래스의 adddomListener 메소드를 사용하여 처리하십시오. AddDomListener 메소드의 첫 번째 인수는 창 객체이고, 두 번째 인수는 '오류'이벤트이며, 세 번째 인수는 오류가 발생할 때 실행될 기능이어야합니다. <p>.</p></set></p></integr></questions>

위 내용은 Google Maps API 및 JQuery 기사를 사용하여 맵에 마커 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!