Thứ Tư, 31 tháng 8, 2016

Google API – Các sự kiện của Google Map

CMP – Container Managed Persistent Bean trong EJB 2

Google API – Các sự kiện của Google Map

Tác giả: Phạm Lê Tấn Đạt

Mục đích: Nội dung của chủ đề này giúp tìm hiểu về các sự kiện của Google Maps. Qua đó, chúng tôi sẽ thực hiện các ví dụ để áp dụng các khái niệm này

Google API – Các sự kiện của Google Map

Tác giả: Phạm Lê Tấn Đạt

Mục đích: Nội dung của chủ đề này giúp tìm hiểu về các sự kiện của Google Maps. Qua đó, chúng tôi sẽ thực hiện các ví dụ để áp dụng các khái niệm này

Yêu cầu

Một số khái niệm cơ bản

  • Các đối tượng được Google tạo ra như Marker, Infowindows có thể đón nhận xử lý thông qua các thao tác người dùng như nhấn chuột, hay bàn phím …
  • Ví dụ: đối tượng google.maps.Marker có thể lắng nghe và xử lý các sự kiện như
  • UI Events
    • Là các sự kiện được người dùng thao tác lên các Object, các Component của Google Map.
    • Google cung cấp cho chúng ta hàm addListener để lắng nghe và xử lý sự kiện:
      • addListener(instance:Object, eventName:string, handler:Function)
      • instance: là đối tượng chịu tác động của sự kiện .
      • eventName: là chuỗi string mô tả sự kiện tác động đã được nói ở trên.
      • handler: là hàm xử lý sau khi đối tượng bị tác động
  • DOM Events
    • Ngoài các UI Events đã nêu ở trên Google cũng cung cấp hàm addDomListener để lắng nghe và xử lý các thao tác của người dùng trên trình duyệt
      • addDomListener(instance:Object, eventName:string, handler:Function)
        • instance: là DOM element được cung cấp bởi trình duyệt (ví dụ như window, document, hoặc các element được định nghĩa như document.getElementById("map-canvas"))
        • eventName: là chuỗi string mô tả sự kiện tác động đã được nói ở trên .
        • handler: là hàm xử lý sau khi đối tượng bị tác động.
      • Thực sự thì hàm này chúng ta đã dùng ở “Google API – Tạo một bản đồ trên web với Google Maps API” như là một khái niệm chấp nhận để chương trình có thể thực hiện.

      • Nếu gỡ bỏ dòng này ra khỏi chương trình và deploy chạy thử, chúng ta sẽ thấy kết quả trên trình duyệt là 1 màu trắng. Điều này có nghĩa là hàm initialize()  không được gọi
      • Nếu chúng ta thử thêm đoạn onload=”initialize()” vào thẻ body của chương trình như hình dưới

      • Thực hiện deploy và chạy lại chương trình. Chúng ta sẽ thấy bản đồ đã hiện lên.
        • Điều này thể hiện dòng code này làm hàm initialize() sẽ được gọi sau khi đối tượng windows của trình duyệt load xong

Các bước thực hiện

  • Chúng ta sẽ sử dụng lại project đã được làm hoàn tất trong bài “Google API – Marker và Info Windows” để mở rộng và áp dụng 02 khái niệm đã nêu ra ở trên
  • UI Events
    • Có một chút thay đổi so với các bài trước, bài này thay vì khai báo đối tượng map trong hàm initialize() chúng ta sẽ đem đối tượng này ra khai báo toàn cục để có thể sử dụng lại trong các hàm khác

    • Ở cuối hàm initialize() chúng ta thêm vào một Listener để lắng nghe và sử lý sự kiện khi người dùng click chuột vào trên bản đồ.

    • Chúng ta viết hàm addMarkerAtClickedPosition

      • Hàm này sẽ có nhiệm vụ tạo ra một marker tại chính địa điểm bản đồ bị click và duy chuyển trung tâm bản đồ về địa điểm đó
    • Thực hiện deploy và chạy chương trình. Sau đó thử click chuột vào một điểm bất kỳ trên bản đồ.

    • Toàn bộ code javascript chúng ta tại thời điểm này như sau

  • Chúng ta vừa xử lý sự kiện cho bản đồ khi bị click. Bây giờ, chúng ta sẽ tiếp tục xử lý sự kiện cho một marker khi bị double click
    • Bên dưới biến toàn cục map, chúng ta thêm một biến toàn cục nữa là numberMarker để lưu số thứ tự của marker được click

    • Ở  cuối cùng của hàm addMarkerAtClickedPosition, chúng ta bổ sung code để tăng biến numberMarker và gọi hàm viewMarkerNumber

    • Chúng ta sẽ viết hàm viewMarkerNumber này để tạo sự kiện khi marker bị double click thì sẽ có một Infowindows hiện lên và thông báo đó là số thứ tự marker và vị trí của marker đó
      • Chúng ta áp dụng kiến thức Infowindows ở các bài trước và kiến thức về xử lý sự kiện ở bài này để viết hàm nêu trên
      • Chúng ta sẽ dùng hàm addListener  với  đối tượng chịu tác động của sự kiện bây giờ là marker và sự kiện tác động là ‘dblclick’

    • Chúng ta thực hiện deploy và chạy ứng dụng

    • Toàn bộ code javascript chúng ta tại thời điểm này như sau

    • Tương tự như vậy quí vị có thể viết thêm code xử lý cho các đối tượng khác nhau với các sự kiện khác nhau
  • DOM Event
    • Đế áp dụng cho DOM Event, chúng ta sẽ modify bài “Google API – Tạo một bản đồ trên web với Google Maps API” để tạo một sự kiện khi người dùng click vào một thẻ div HTML

    • Chúng ta tạo 1 Listener để lắng nghe sự kiện khi người dùng click vào thẻ div map-canvas và gọi hàm showAlert để xử lý.
    • Chúng ta thực thi để có kết quả

Chúc mừng các bạn, chúng ta đã hoàn tất xong việc tiếp cận các sự kiện của Google Map API và áp dụng chúng để lấy khái niệm

Rất mong sự góp ý chân thành của các bạn và hẹn các bạn trong bài tiếp theo liên quan đến Google API, cụ thể là các Service liên quan tới việc tìm đường đi, đánh dấu tọa độ, tìm địa điểm …. và cách sử dụng chúng.

 

Người đăng: vào lúc
Nhãn:

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)