Bài 05: Google map events - Getting - Setting -Quản lý Listeners

Ở bài Google map events - UI Events - MVC State Changes chúng ta đã tìm hiểu một số khái niệm về Events trong google map, các ví dụ điển hình của events. Tuy nhiên các ví dụ chưa thể hiện được tất cả những cách dùng google map thông dụng, nên trong bài này ta tiếp tục tìm hiểu các ví dụ của google map nhé.

1. Google Map - Getting and Setting Properties within Event Handlers

Getting (Lấy) và Setting (Thiết lập) là hai khái niệm rất quen thuộc trong lập trình hướng đối tượng, nó được sử dụng trong các mô hình thiết kế Design Partern của OOP. Trong javascript cũng tương tự, ta sử dụng hai khái niệm này để lấy các thuộc tính của UI Events hoặc MVC State google map, lúc này biến mà chúng ta gán thuộc tính này sẽ lưu toàn bộ các trạng thái hiện tại của thuộc tính, và khi bạn thay đổi thuộc tính trong biến đó thì tương ứng trong đối tượng Google cũng thay đổi theo.

Ví dụ dưới đây mô tả cách sử dụng GET và SET trong Google Map: Xem demo

Trong ví dụ này xử lý sự kiện khi Zoom bản đồ google map ta sẽ lấy độ Zoom và hiển thị tại vị trí trung tâm của bản đồ.

<!DOCTYPE html>
<html>
    <head>
        <title>Getting properties with event handlers</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
        <script>
            function initialize() 
            {
                // Lấy tọa độ ban đầu
                var myLatLng = new google.maps.LatLng(10.771971, 106.697845);
                
                var mapOptions = {
                    zoom: 4,
                    center: myLatLng
                };

                // Tạo bản đồ
                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                
                // Tạo một cửa sổ mới với vị trí nằm ngay giữa bản đồ
                var infowindow = new google.maps.InfoWindow({
                    content: 'Change the zoom level',
                    position: myLatLng
                });
                
                // Mở cửa sổ
                infowindow.open(map);
                
                // Gán vào sự kiện Zoom_change một hàm, hàm này se show độ zoom
                google.maps.event.addListener(map, 'zoom_changed', function() 
                {
                    // Lấy thông số Zoom hiện tại
                    var zoomLevel = map.getZoom();
                    
                    // Thiết lập trung tâm bản đồ tại ví trí cũ
                    map.setCenter(myLatLng);
                    
                    // Đổi thông tin của infowindow
                    infowindow.setContent('Zoom: ' + zoomLevel);
                });
            }
            
            // Hàm gọi tạo bản đồ
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

2. Google Map - Listening to DOM Events

Trong mô hình sự kiện của Google Map được tạo và quản lý dưới hệ thống Instance của Google Map, như vậy muốn truy xuất tới Events Google Map thì bắt buộc bạn phải thao tác lên trên đối tượng của Google Map. Giả sử giờ tôi muốn tạo một button, khi click vào button đó thì sự kiện nào đó trong google map sẽ nhận thấy và thực thi theo, rất đơn giản ta sử dụng hàm addDomListener() của Google Map.

Cú pháp: addDomListener(instance:Object, eventName:string, handler:Function)

Lưu ý rằng addDomListener() chỉ đơn giản là nhận diện các sự kiện của DOM trên trình duyệt và xử lý theo mô hình DOM của trình duyệt. Tuy nhiên đa số các trình duyệt hiện tại hỗ trợ DOM ở mức Level2, để tham khảo các mức Dom Level thì bạn tham khảo theo link Mozilla DOM Levels.

Ở các bài trước tôi sử dụng hàm window.onload để khởi tạo bản đồ google map, tuy nhiên ta vẫn còn cách khác nữa là gán vào sự kiện onload của thẻ <body>. Tham khảo 2 cách dưới đây:

Cách 1:

<script>
    function initialize() {
      // Map initialization
    }
</script>
<body onload="initialize()">
    <div id="map-canvas"></div>
</body><br><br><br><br><br><br><br>
Cách 2:

<script>
  function initialize() {
    // Map initialization
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
  <div id="map-canvas"></div>
</body>

Ví dụ dưới đây sẽ thực hiện alert lên một thông báo nếu như ta click vào div canvas chứa bản đồ.

Xem demo:

<!DOCTYPE html>
<html>
    <head>
        <title>Listening to DOM events</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
        <script>
            function initialize() 
            {
                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(10.771971, 106.697845)
                };
                
                var mapDiv = document.getElementById('map-canvas');
                
                var map = new google.maps.Map(mapDiv, mapOptions);
                
                // Gán sự kiện khi click vào thẻ div mapDiv vào google map,
                // sẽ thông báo message
                google.maps.event.addDomListener(mapDiv, 'click', showAlert);
            }

            function showAlert() {
                window.alert('DIV clicked');
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

3. Google Map - Removing Event Listeners

Để thêm một sự kiện nào đó ta dùng hàm addListener(), và để xóa một sự kiện nào đó ra khỏi hệ thống DOM của Google Map ta dùng hàm removeListener().

Ví dụ:

var listener1 = google.maps.event.addListener(marker, 'click', aFunction);
google.maps.event.removeListener(listener1);
Để xóa hết các listener ta dùng hàm clearInstanceListeners().

Ví dụ:

var listener1 = google.maps.event.addListener(marker, 'click', aFunction);
var listener2 = google.maps.event.addListener(marker, 'mouseover', bFunction);

// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);
Để xóa danh sách các listener theo một sự kiện nào đó, ví dụ như click thì ta sử dụng hàm clearListeners().

Ví dụ:

marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);

// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');

Để tham khảo danh sách các sự kiện bạn vào link google.maps.event namespace để đọc thêm.

4. Lời kết

Vậy là coi như ta kết thúc phần tìm hiểu các sự kiện UI Events và MVC State trong Google Map, qua bài này tôi hy vọng bạn sẽ hiểu được một số API căn bản như API tạo bản đồ, api tạo marker, hiểu được cách sử dụng events trong google map.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.