Google Maps - Sự kiện
Chương trình JavaScript của Google Maps có thể phản hồi các sự kiện khác nhau do người dùng tạo. Chương này cung cấp các ví dụ minh họa cách thực hiện xử lý sự kiện khi làm việc với Google Maps.
Thêm trình xử lý sự kiện
Bạn có thể thêm người nghe sự kiện bằng phương pháp addListener(). Nó chấp nhận các tham số như tên đối tượng mà chúng ta muốn thêm trình nghe, tên của sự kiện và sự kiện xử lý.
Thí dụ
Ví dụ sau đây cho thấy cách thêm trình xử lý sự kiện vào đối tượng đánh dấu. Chương trình tăng giá trị thu phóng của bản đồ lên 5 mỗi khi chúng ta nhấp đúp vào điểm đánh dấu.
<!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>Nó tạo ra kết quả sau:
Mở cửa sổ thông tin khi nhấp chuột
Đoạn mã sau sẽ mở ra một cửa sổ thông tin khi nhấp vào điểm đánh dấu -
<!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>Nó tạo ra kết quả sau:
Xóa trình nghe
Bạn có thể xóa một người nghe hiện có bằng phương pháp removeListener(). Phương thức này chấp nhận đối tượng nghe, do đó chúng ta phải gán trình nghe cho một biến và chuyển nó cho phương thức này.
Thí dụ
Đoạn mã sau đây cho biết cách xóa một trình nghe -
<!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>Nó tạo ra kết quả sau: