Google Maps JavaScript API를 사용하면 API를 사용하기 전에 API 키를 신청하려면 http://code.google.com으로 이동하세요. /apis/maps/signup.html. 여기서는 귀하가 획득한 키가 ABQIAA라고 가정합니다.
여기서 jquery에 대한 소개는 더 이상 번거롭지 않습니다. 인터넷에는 jquery에 대한 소개가 많이 있습니다.
그런 다음 JQuery와 Google Maps JavaScript API를 사용하여 Google 지도의 흥미로운 지도 효과를 결합한 다음 Google Maps JavaScript API에 익숙해지는 목표를 달성하겠습니다.
첫 번째 HelloChina:
(1) html 파일에 html 코드 작성:
map.html
"http://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd">
JQuery를 사용한 Google 지도 .src="http://maps.google.com/maps?file=api&v=2&key=ABQIAA" type="text/javascript">
<본문>
;div id="message">
(2)js 파일에 작성
map.js
코드 복사
코드는 $(document) 입니다. Ready(function() {
//브라우저 호환성 확인
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map .setCenter(new GLatLng(36.94, 106.08), 4);//중국의 위도와 경도 및 지역 배율
map.setMapType(G_SATELLITE_MAP);
//문서가 언로드될 때 트리거됨
$( window) .unload(function (){
$('.').unbind();
GUnload();
})
}else
{
alert( 'The 사용 중인 브라우저는 Google 지도를 지원하지 않습니다!');
}
})
(3) 주소 표시줄에 해당 페이지의 주소를 입력하세요. 키는 귀하와 동일합니다) 주소 또는 도메인 이름 일치)를 입력하고 렌더링을 보면 중국이 지도 중앙에 있음을 알 수 있습니다.
HolloChina 렌더링
지도 이동 및 변형
(1) 자바스크립트 코드를 다음과 같이 수정합니다.
map.js
코드 복사
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(36.94, 106.08), 4)
//4초 후 이동
window.setTimeout(function () {
map.panTo(new GLatLng(35.746512259918504,78.90625))
}, 4000)
$(window).unload(function (){
$('.') .unbind();
GUnload();
});
}else
{
alert('사용 중인 브라우저는 Google 지도를 지원하지 않습니다!'); }
})
(2) 해당 주소를 입력하고 4초간 기다리면 지도의 중심이 중국 서쪽(대략 위치)으로 이동하는 것을 볼 수 있습니다.
지도 중심이 중국 서쪽으로 이동합니다
컨트롤 추가 및 지도 유형 수정
자바스크립트 코드를 다음과 같이 수정합니다.
map.js
코드 복사
var map = new GMap2( document.getElementById("map"));
//소형 스케일링 컨트롤러
map.addControl(new GSmallMapControl())//맵 유형 Controller
map.addControl(new GMapTypeControl ());
map.setCenter(new GLatLng(36.94,106.08),4)
//지도를 위성 지도로 설정
map.setMapType (G_SATELLITE_MAP);//지도 유형 수정
$(window).unload(function (){
$('.').unbind();
GUnload();
}) ;
}else
{
alert('사용 중인 브라우저는 Google 지도를 지원하지 않습니다!')
}
});
페이지를 새로 고치면 위성 지도 왼쪽 상단에 작은 텔레스코픽 컨트롤이 있고 오른쪽 상단에 지도 선택 컨트롤이 있는 것을 볼 수 있습니다.
컨트롤 추가 후 렌더링
이벤트 리스너 추가 및 스크롤 휠 텔레스코픽 제어 효과 켜기
자바스크립트 코드 수정:
map.js
$(document).ready(function()
{
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl())
map.addControl(new GMapTypeControl())//스크롤 휠 텔레스코픽 효과 활성화 - 지도를 확대하려면 마우스 휠을 앞으로 돌리고, 축소하려면 그 반대로
map.enableScrollWheelZoom()
//moveend 이벤트 리스너 추가
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
//이 DIV에 표시 지도 중심의 위도와 경도
$('#message').text(center.toString( ))
});
map.setCenter(new GLatLng(36.94,106.08),4)
$(window).unload(function (){
$('.') .unbind();
GUnload();
});
}else
{
alert('사용 중인 브라우저는 Google 지도를 지원하지 않습니다!'); }
});
이때 지도는 휠을 스크롤하면 확대 및 축소되며 지도 왼쪽의 좌표 정보도 이에 따라 변경됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
