Google지도-이벤트
Google Maps JavaScript 프로그램은 사용자가 생성 한 다양한 이벤트에 응답 할 수 있습니다. 이 장에서는 Google지도로 작업하는 동안 이벤트 처리를 수행하는 방법을 보여주는 예제를 제공합니다.
이벤트 리스너 추가
메소드를 사용하여 이벤트 리스너를 추가 할 수 있습니다. addListener(). 리스너를 추가 할 객체 이름, 이벤트 이름 및 핸들러 이벤트와 같은 매개 변수를받습니다.
예
다음 예제는 마커 객체에 이벤트 리스너를 추가하는 방법을 보여줍니다. 프로그램은 마커를 두 번 클릭 할 때마다지도의 확대 / 축소 값을 5 씩 올립니다.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>다음 출력을 생성합니다-
클릭시 정보 창 열기
다음 코드는 마커를 클릭하면 정보 창을 엽니 다-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>다음 출력을 생성합니다-
리스너 제거
메소드를 사용하여 기존 리스너를 제거 할 수 있습니다. removeListener(). 이 메서드는 리스너 객체를 받아들이므로 리스너를 변수에 할당하고이 메서드에 전달해야합니다.
예
다음 코드는 리스너를 제거하는 방법을 보여줍니다-
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>다음 출력을 생성합니다-