GOOGLE MAPS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top