Làm cho microdata của HTML5 có ích, Phần 1: Sử dụng jQuery ở trên microdata

Tạo một bản đồ tương tác với trình cắm thêm UI Map của jQuery và microdata của bạn

Đặc tả microdata (vi dữ liệu) liệt kê hai lý do tại sao bạn có thể cần sử dụng microdata: Để cho phép các kịch bản lệnh chung cung cấp các dịch vụ được tùy chỉnh cho trang web hoặc để làm cho nội dung từ nhiều tác giả cộng tác được xử lý bằng một kịch bản lệnh duy nhất theo một cách nhất quán. Trong loạt bài hai phần này, hãy tìm hiểu cách sử dụng microdata theo cả hai cách như vậy, bắt đầu với các kịch bản lệnh chung ở trên microdata. Trong bài này, bạn sẽ viết một đoạn mã HTML để cung cấp cho bạn một bản đồ sự kiện tương tác và cho phép Google, Bing và Yahoo hiển thị trang của bạn tốt hơn trong kết quả tìm kiếm với Rich Snippets (Các đoạn thông tin phong phú).

Lin Clark, Nhà phát triển Drupal, Digital Enterprise Research Institute, NUI Galway

Author photoLin Clark là một nhà phát triển Drupal chuyên về Dữ liệu liên kết. Cô là người bảo trì nhiều mô-đun Drupal, như Microdata và SPARQL Views và là một người tham gia tích cực trong Lực lượng đặc nhiệm dữ liệu HTML của W3C và sáng kiến HTML5 của Drupal. Cô đã học tại trường Đại học Carnegie Mellon và sắp làm xong bằng thạc sĩ nghiên cứu tại Viện Nghiên cứu doanh nghiệp số tại NUI Galway. Nhiều thông tin có sẵn tại địa chỉ lin-clark.com.



04 04 2012

Giới thiệu

Các thư viện như jQuery đã cách mạng hóa con đường mà các nhà phát triển tạo các trang web, thúc đẩy sự phát triển của một bộ sưu tập lớn các kịch bản lệnh sẵn sàng-để-chạy và bạn có thể chỉ thêm chúng vào các trang HTML. Microdata có tiềm năng để thúc đẩy cuộc cách mạng này tiến một bước xa hơn, làm cho việc tạo các kịch bản lệnh làm việc liên tục trên bất kỳ trang web nào dễ dàng hơn, không quan tâm đến các biến thể trong các khuôn mẫu HTML.

Các từ viết tắt thông dụng

  • CSV: Giá trị được phân cách bằng dấu phẩy
  • JSON: Ký hiệu đối tượng JavaScript
  • RDF: Khung công tác mô tả tài nguyên
  • RDFa: RDA với các thuộc tính
  • SEO: Tối ưu hóa máy tìm kiếm

Ví dụ, để hiển thị các sự kiện có kế hoạch trên một bản đồ, các trình cắm thêm jQuery tích hợp với các bản đồ Google và giúp cho việc tạo một bản đồ tương tác trên trang web của bạn dễ dàng. Nỗ lực duy nhất cần thiết trong phần việc của bạn là tạo ra một tệp theo một định dạng có cấu trúc, như JSON hoặc CSV, có chứa các địa điểm. Mặc dù, việc có dữ liệu này theo một định dạng có cấu trúc riêng biệt có thể là một vấn đề, nếu bạn cũng muốn hiển thị thông tin theo HTML trên trang web. Để duy trì các nội dung trong cả hai HTML và tệp dữ liệu hoặc bạn phải viết một kịch bản lệnh chuyển dịch giữa HTML trên trang đó và tệp dữ liệu hoặc bạn phải nhân đôi nỗ lực của mình. Cách tiếp cận này có thể dẫn đến HTML và các tệp dữ liệu mất đồng bộ rất nhanh.

Việc duy trì các tệp đồng bộ là một trong những lợi thế chính về việc sử dụng các định dạng dữ liệu HTML như microdata và RDFa — bạn có thể viết HTML như bạn vẫn thường làm rồi thêm một vài thuộc tính vào các thẻ HTML để tăng nó lên gấp đôi khi lưu trữ dữ liệu của bạn. Vì các định dạng dữ liệu HTML này là các tiêu chuẩn web được phát triển và được phê chuẩn bởi WHATWG và W3C, những người đã xây dựng các công cụ biết cách trích xuất dữ liệu từ HTML và bạn có thể dễ dàng sử dụng lại các công cụ này trên trang web của bạn.

Do microdata chỉ mới bắt đầu đạt được kết quả đáng kể gần đây, nên chỉ có một vài trình cắm thêm đã được phát hành có hỗ trợ. Một ví dụ là trình cắm thêm UI Map (Bản đồ giao diện người dùng) của jQuery, cung cấp loại bản đồ đã mô tả ở trên.


Tạo một bản đồ sự kiện có sẵn cho Rich Snippet

Bạn có thể sử dụng một đoạn mã HTML ngắn để lấy cả hai một bản đồ sự kiện tương tác và tối ưu hóa máy tìm kiếm (SEO) tốt hơn.

Như đã mô tả trong một bài trước (xem Tài nguyên để có một liên kết), có thể sử dụng microdata với các thuật ngữ trong bảng từ vựng Schema.org để giúp các máy tìm kiếm hiểu rõ hơn nội dung của bạn. Cách tiếp cận này cho phép các máy tìm kiếm hiển thị Rich Snippets, đưa thông tin quan trọng nhất về trang web đó vào chính kết quả tìm kiếm.

Các chú thích mà bạn thêm vào để lấy Rich Snippets có thể làm tăng gấp đôi nhiệm vụ. Ngoài các kết quả tìm kiếm tốt hơn, bạn cũng có thể sử dụng chúng trên trang riêng của mình để cung cấp một hiển thị tốt hơn.

Bạn sẽ sử dụng một trình cắm thêm jQuery để làm điều này. Tôi đưa các tệp có liên quan vào phần tải về của mã ví dụ, bao gồm một phiên bản trình cắm thêm có chỉnh sửa một chút.


Liệt kê sự kiện cơ bản

Hãy tạo một bản liệt kê các sự kiện DrupalCamp trên toàn thế giới. Để bắt đầu, hãy tạo một trang HTML có hai sự kiện như trong Liệt kê 1.

Liệt kê 1. Hai sự kiện liệt kê HTML cơ bản
<!DOCTYPE html>
  <head>
    <title>Upcoming DrupalCamps</title>
  </head>
  <body id="doc">
    <h1>Upcoming DrupalCamps</h1>

    <!-- Event 1: DrupalCamp Toulouse -->
    <div>
      <h2><a href="http://example.com/drupalcamp_fr">DrupalCamp Toulouse 2011</a></h2>
      <img src='images/drupalicon_fr.png' />
      <p>Vous l&rsquo;attendiez tous, le DrupalCamp Toulouse aura bien lieu, 
r&#233;uni avec 2 autres &#233;v&#233;nements sous la bannière 
"Capitole du Libre": le DrupalCamp, une Ubuntu Party, une Akademy 
(&#233;v&#232;nement KDE).</p>
      <div>
        ENSEEIHT, Toulouse, Haute-Garonne, FR
      </div>
      <div>
        <time datetime="2011-11-26T09:00:00+01:00">November 26, 10:00am</time> &ndash;
        <time datetime="2011-11-27T17:00:00+01:00">November 27, 6:00pm</time>
      </div>
    </div>

    <!-- Event 2: DrupalCamp Ohio -->
    <div>
      <h2><a href="http://example.com/drupalcampohio">Drupalcamp Ohio 2011</a></h2>
      <img src='images/drupalicon_oh.png' />
      <p>The Central Ohio Drupal User Group (CODUG) is proud to announce 
Ohio&rsquo;s first Drupalcamp. On Saturday, December 3rd, we&rsquo;ll hold an 
all-day camp with keynote speaker, breakout sessions and Birds of Feather groups at The 
Ohio State University&rsquo;s Nationwide and Ohio Farm Bureau 4-H Center.</p>
      <div>
        The Ohio State University, Columbus, Ohio, US
      </div>
      <div>
        <time datetime="2011-12-03T09:00:00-05:00">December 3, 9:00am</time> &ndash;
        <time datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
      </div>
    </div>

  </body>
</html>

Lưu ý rằng bạn đã đánh dấu ngày tháng bằng một phần tử đặc biệt. Đây là phần tử time (thời gian) mới, là một phần của tiêu chuẩn cốt lõi của HTML5. Nó cho phép bạn thêm thời gian chính xác vào các trang sao cho các ứng dụng có thể dễ dàng phân tích cú pháp và sử dụng chúng. Trong ví dụ này, Google sử dụng các phần tử thời gian này để chọn ba sự kiện tiếp theo từ trang web đó để hiển thị trong Rich Snippets. Lưu ý rằng tại thời điểm xuất bản, có cuộc bàn luận về liệu có thay đổi phần tử thời gian đó với một phần tử dữ liệu chung chung hơn không. Nếu điều này xảy ra, "time" (thời gian) sẽ được thay thế bằng "data" (dữ liệu) và "datetime" sẽ được thay thế bằng "value " (giá trị) trong đoạn mã dưới đây.

Datetime được hình thành bắt đầu với ngày theo định dạng YYYY-MM-DD (4 số năm - 2 số tháng - 2 số ngày. Tiếp theo, một chữ "T" phân biệt ngày với thời gian, được đưa ra theo định dạng HH: MM: SS (2 số giờ: 2 số phút: 2 số giây). Sau đó là độ lệch thời gian so với Giờ phối hợp quốc tế (UTC). Ví dụ vào mùa đông ở nước Pháp là 1 giờ trước giờ UTC, vì thế độ lệch thời gian thêm '+01:00' vào cuối cùng của chuỗi datetime. Ohio là 5 giờ sau giờ UTC vào mùa đông, do đó, độ lệch thời gian thêm '-05:00' vào cuối cùng của chuỗi datetime. Giá trị thêm vào này đưa đến giá trị dễ đọc bằng máy "2011-12-03T09:00:00-05:00" cho Giờ chuẩn trung tâm là 9 giờ sáng ngày 03 tháng 12 năm 2011.

Lưu tệp này vào thư mục jquery-ui-map/demos trên máy chủ web của bạn và nạp nó vào trình duyệt của bạn. Hình 1 cho thấy các chi tiết cho cả hai sự kiện được mô tả trong Liệt kê 1.

Hình 1. Trang cơ bản liệt kê hai sự kiện
Ảnh chụp màn hình của trang cơ bản liệt kê hai sự kiện

Làm cho các sự kiện trở thành Rich Snippet có sẵn

Trang có phần tử thời gian bao gồm một ít thông tin dễ hiểu bằng máy. Bây giờ hãy xem liệu việc thêm vào này có làm thay đổi cách Google hiển thị kết quả không. Chuyển tới Công cụ thử nghiệm Rich Snippets của Google và nhập URL cho trang của bạn (xem Hình 2). Bạn thấy các lỗi tạo chức năng xem trước là trang đó không có đánh dấu nguồn tác giả, đánh dấu đoạn thông tin phong phú, thông tin nguồn tác giả, thay cho các chi tiết sự kiện.

Hình 2. Không có kết quả nào cho HTML cơ bản trong công cụ thử nghiệm Rich Snippets
Không có kết quả nào cho HTML cơ bản trong công cụ thử nghiệm Rich Snippets

Mặc dù Google biết rằng trang web của bạn liệt kê các thời gian, nhưng nó không biết rằng các thời gian này là thời gian bắt đầu và kết thúc cho các sự kiện. Để giúp Google hiểu điều này, bạn cần thêm một vài thuật ngữ Schema.org (xem Liệt kê 2). Việc xuất bản đánh dấu Schema.org với microdata được trình bày chi tiết hơn trong một bài viết trước đây (xem Tài nguyên để có một liên kết).

Liệt kê 2. Làm cho <div> của mỗi sự kiện thành một mục Event (Sự kiện)
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
</div>

<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
  ...
</div>

Tiếp theo hãy thêm các đặc tính url và tên cho sự kiện này. Lưu ý rằng bạn thêm một phần tử <span> xung quanh tên để có một chỗ để thêm thuộc tính itemprop vào. Bạn cũng thêm đặc tính image (hình ảnh). Bạn không cần hình ảnh cho Rich Snippet này, nhưng bạn sẽ sử dụng đặc tính đó về sau này.

Liệt kê 3. Thêm các đặc tính url và tên cho sự kiện
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  <h2><a href="http://example.com/drupalcamp_fr" itemprop="url"><span 
itemprop="name">DrupalCamp Toulouse 2011</span></a></h2>
  <img itemprop="image" src='images/drupalicon_fr.png' />
  ...
</div>

<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
  <h2><a href="http://example.com/drupalcampohio" itemprop="url"><span 
itemprop="name">Drupalcamp Ohio 2011</span></a></h2>
  <img itemprop="image" src='images/drupalicon_oh.png' />
  ...
</div>

Bây giờ bạn có thể thêm một thời gian bắt đầu và (theo tùy chọn) một thời gian kết thúc. Do bạn đã sử dụng phần tử thời gian, bạn đã có một giá trị dễ đọc bằng máy cho các thời gian bắt đầu và kết thúc. Bạn chỉ cần thêm các thuật ngữ Schema.org để cho Google biết đó là cái nào (xem Liệt kê 4).

Liệt kê 4. Thêm các đặc tính startdate và enddate trên các phần tử thời gian
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div>
    <time itemprop="startDate" datetime="2011-11-26T09:00:00+01:00">November 26, 
10:00am</time> &ndash;
    <time itemprop="endDate" datetime="2011-11-27T17:00:00+01:00">November 27, 
6:00pm</time>
  </div>
</div>

<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div>
    <time itemprop="startDate" datetime="2011-12-03T09:00:00-05:00">December 3, 
9:00am</time> &ndash;
    <time itemprop="endDate" 
datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
  </div>
</div>

Thử nghiệm lại trang này bằng Công cụ kiểm tra. Do các URL trỏ đến một miền khác với URL cơ bản, bạn sẽ thấy các cảnh báo ngăn không cho Rich Snippet hiển thị (Hình 3).

Hình 3. Cảnh báo ngăn không cho hiển thị Rich Snippet
Ảnh chụp màn hình cảnh báo ngăn chặn hiển thị của Rich Snippet

Google yêu cầu các liên kết đến các sự kiện trỏ tới các trang trong cùng một miền. Yêu cầu này được thiết kế để ngăn chặn các hoạt động gửi thư rác. Nếu bạn tìm kiếm và thay thế example.com bằng tên miền của bạn và thử nghiệm lại, bạn sẽ thấy hiển thị của Rich Snippet như trong Hình 4.

Hình 4. Rich Snippet hiển thị cả hai sự kiện với các ngày bắt đầu của chúng
Ảnh chụp màn hình Rich Snippet hiển thị hai sự kiện với các ngày bắt đầu của chúng

Lưu ý rằng ngay cả khi công cụ thử nghiệm cho bạn thấy một Rich Snippet, bạn không được đảm bảo sẽ có các hiển thị Rich Snippet trong kết quả tìm kiếm thực tế. Bạn phải đặt yêu cầu cho Google để trang web của bạn được xem xét lại trước khi Google sẽ cho phép kết quả đầu ra Rich Snippet cho các trang của bạn trong các kết quả tìm kiếm. Để biết thêm thông tin về điều này, xem Các câu hỏi thường gặp (FAQ).


Thêm bản đồ giao diện người dùng jQuery

Vì DrupalCamps được tổ chức trên khắp thế giới, các khách truy cập của bạn sẽ cần một bản đồ hiển thị các sự kiện nào ở trong một khoảng cách di chuyển hợp lý. Để có được một bản đồ, chỉ cần thêm một vài mẩu thông tin.

Đầu tiên, thiết lập bản đồ để hiển thị. Thêm một <div> trong tài liệu để đặt bản đồ bên dưới tiêu đề trang và trên các liệt kê sự kiện (Liệt kê 5).

Liệt kê 5. Thêm bản đồ <div>.
<body id="doc">
  <h1>Upcoming DrupalCamps</h1>

  <div>
    <div id="map_canvas"></div>
  </div>

 <!-- Event 1: DrupalCamp Toulouse -->

Bạn cần phải thêm một số tệp JavaScript để chuyển <div> này thành một bản đồ tương tác. Ngoài ra thêm một số tệp CSS, cung cấp một chiều cao cho #map_canvas <div> sao cho bạn có thể nhìn thấy nó. Các tệp cục bộ được đưa vào trong mã nguồn (xem Tải về).

Liệt kê 6. Thêm CSS ngoài, các thư viện JavaScript và jQuery nội tuyến
<head>
  <title>Upcoming DrupalCamps</title>

  <!-- External Stylesheets -->
  <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
  <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
  <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
  <link rel="stylesheet" type="text/css" href="css/main.css" />

  <!-- Google Maps API and jQuery, served by Google -->
  <script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <!-- jQuery UI Maps files for placing markers and for parsing Microdata -->
  <script type="text/javascript" src="../web/jquery.fn.gmap.js"></script>
  <script type="text/javascript" 
src="../ui/jquery.ui.map.services.js"></script>
  <script type="text/javascript" 
src="../ui/jquery.ui.map.microdata.js"></script>
  ...

Sau đó, thêm một khối jQuery để lấy #map_canvas khi trang web khởi tạo và chuyển nó thành một bản đồ (xem Liệt kê 7). Bạn sẽ thêm nhiều hơn nữa cho chức năng này sau.

Liệt kê 7. Khởi tạo bản đồ
...
  <!-- Grab the #map_canvas div and turn it into a map -->
  <script type="text/javascript">
    $(function() {
      map = $('#map_canvas');

      map.gmap().bind('init', function () {
      });
    });
  </script>
</head>

Khi bạn tải lại trang, bạn sẽ thấy bản đồ (trong Hình 5). Nó vẫn chưa có bất kỳ sự kiện nào được đánh dấu; bạn vẫn cần thêm một ít thông tin về các sự kiện đó để hiển thị.

Hình 5. Một bản đồ cơ bản chưa có bất kỳ điểm dấu nào
Ảnh chụp màn hình bản đồ cơ sở không có bất kỳ điểm dấu nào

Thêm các địa điểm bằng microdata

Bạn cần phải thêm các địa điểm của các sự kiện bằng microdata trước khi bạn có thể thêm các điểm dấu vào bản đồ. Bây giờ, hãy xử lý từng địa chỉ như là một chuỗi duy nhất. Tuy nhiên, các địa chỉ có nhiều phần riêng biệt và bạn muốn thể hiện cấu trúc này bằng microdata để nhận được các giá trị đúng dễ dàng và nhất quán, ngay cả khi bạn thay đổi cấu trúc HTML sau này.

Đầu tiên, thêm đặc tính location (địa điểm), lấy một Place (vị trí) làm giá trị của nó (xem Liệt kê 8).

Liệt kê 8. Thêm đặc tính location cho sự kiện
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div itemprop="location" itemscope itemtype="http://schema.org/Place">
    ENSEEIHT, Toulouse, Haute-Garonne, FR
  </div>
  ...
</div>

Giá trị place có thể có một tên và một địa chỉ bưu chính. Một địa chỉ bưu chính là một mục có các đặc tính riêng của nó, như địa chỉ đường phố, thành phố (addressLocality), bang (addressRegion) và addressCountry, là mã quốc gia alpha-2 ISO 3166-1 hai chữ cái. Liệt kê 9 ngắt các đặc tính này ra bằng cách sử dụng các thẻ span.

Liệt kê 9. Sử dụng các thẻ span
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
  ...
  <div itemprop="location" itemscope itemtype="http://schema.org/Place">
    <span itemprop="name">ENSEEIHT</span><br /> 
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">Rue Sylvain Dauriac</span><br />
      <span itemprop="addressLocality">Toulouse</span>,
      <span itemprop="addressRegion">Haute-Garonne</span>,
      <span itemprop="addressCountry">FR</span>
    </span>
  </div>
  ...
</div>

Bạn có thể định dạng địa chỉ cho các sự kiện khác theo cách tương tự.


Đặt các địa điểm trên bản đồ

Bạn đã sẵn sàng để thêm các điểm dấu vào bản đồ. Đầu tiên, phân tích cú pháp microdata trên trang đó thành một đối tượng mà bạn có thể sử dụng. Để làm điều này, hãy chỉ rõ kiểu mục mức cao nhất nào là nguồn dữ liệu mà bạn cần. Các mục mức cao nhất trong microdata có thể được coi là các mục gốc; chúng là các mục không phải là một đặc tính của bất kỳ mục khác nào nhưng có các đặc tính riêng của mình. Chỉ rõ http://schema.org/Event. Địa chỉ này trả về một đối tượng cho mỗi sự kiện (xem Liệt kê 10).

Liệt kê 10. Phân tích cú pháp microdata thành một đối tượng
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');

      map.gmap().bind('init', function () {
        // Process the microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          window.console.log(result);
        });
      });
    });
</script>

Bạn có thể thấy đối tượng này được tạo ra từ microdata trong giao diện điều khiển JavaScript trong các trình duyệt như Firefox và Chrome. Mỗi mục trong microdata được chuyển dịch thành một đối tượng với đối tượng các đặc tính riêng của nó có chứa bất kỳ các giá trị itemprop nào từ mục đó. Vì các đặc tính trong microdata có thể có nhiều giá trị, nên các giá trị itemprop được xử lý như các mảng (xem Hình 6).

Hình 6. Kiểm tra đối tượng trong giao diện điều khiển JavaScript của Chrome
Ảnh chụp màn hình về nguồn đối tượng trong giao diện điều khiển JavaScript của Chrome

Đối tượng này có tất cả các đặc tính mà bạn cần để nhận được các tọa độ địa lý của địa điểm này, nơi bạn cần đặt các điểm dấu cho sự kiện. Để có được thông tin này, hãy trích xuất các phần của địa chỉ đối tượng đó và kết hợp chúng thành một chuỗi địa chỉ mà Google sẽ hiểu. Sau đó, bạn có thể sử dụng Geocoder (trình mã hóa địa lý) của Google để lấy các tọa độ cho địa chỉ này. Thư viện bản đồ giao diện người dùng jQuery cung cấp một chức năng trình bao mà bạn có thể sử dụng nó để chạy yêu cầu của Geocoder.

Lưu ý rằng nếu bạn nhận được một lỗi không xác định, hãy kiểm tra hai lần để chắc chắn rằng bạn có tất cả các đặc tính cần thiết trên tất cả các sự kiện được liệt kê (xem Liệt kê 11).

Liệt kê 11. Chạy yêu cầu của Geocoder cho địa chỉ này
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');

      map.gmap().bind('init', function () {
        // Process the Microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          // Traverse from the Event to the Place and from the Place to the
          // Address to get the properties.
          var placeName = result.properties.location[0].properties.name[0];
          var streetAddress = 
result.properties.location[0].properties.address[0].properties.streetAddress[0];
          var city = 
result.properties.location[0].properties.address[0].properties.addressLocality[0];
          var state = 
result.properties.location[0].properties.address[0].properties.addressRegion[0];
          var country = 
result.properties.location[0].properties.address[0].properties.addressCountry[0];

          // Join the address parts into a comma-separated string.
          var address = [placeName, city, state, country].join(', ')

          // Run the Geocoder request for the address.
          map.gmap('search', {'address': address } , function(result, status) {
            window.console.log(result);
            // We will place the marker here.
          });
        });
      });
    });
</script>

Nếu bạn xem xét kết quả trong giao diện điều khiển, bạn sẽ thấy rằng dịch vụ đã trả về một hoặc nhiều địa điểm phù hợp với địa chỉ của bạn. Bạn sẽ chỉ sử dụng một địa chỉ đầu tiên vì đây là địa chỉ phù hợp tốt nhất. Đối tượng này có một đặc tính geometry (hình học) có chứa các thông tin về tọa độ địa lý mà bạn cần (xem Liệt kê 12).

Liệt kê 12. Đặt điểm dấu
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');
      map.gmap().bind('init', function () {
        // Process the Microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          // Traverse from the Event to the Place and from the Place to the
          // Address to get the properties.
          var placeName = result.properties.location[0].properties.name[0];
          var streetAddress =
result.properties.location[0].properties.address[0].properties.streetAddress[0];
          var city = 
result.properties.location[0].properties.address[0].properties.addressLocality[0];
          var state = 
result.properties.location[0].properties.address[0].properties.addressRegion[0];
          var country = 
result.properties.location[0].properties.address[0].properties.addressCountry[0];

          // Join the address parts into a comma-separated string.
          var address = [placeName, city, state, country].join(', ')

          // Run the Geocoder request for the address.
          map.gmap('search', {'address': address } , function(result, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              // Create a LatLng object.
              var lat = result[0].geometry.location.lat();
              var lng = result[0].geometry.location.lng();
              var latlng = new google.maps.LatLng(lat, lng);
  
              // Place the marker.
              var markerOptions = { 
                'bounds':true,
                'position': latlng
              };
              map.gmap('addMarker', markerOptions);
            } else {
              alert("Geocode was not successful for the following reason: " + status);
            }
          });
        });
      });
    });
</script>

Khi bạn tải lại trang, bạn sẽ thấy các điểm dấu như trong Hình 7.

Hình 7. Các điểm dấu được đặt trên bản đồ
Ảnh chụp màn hình các điểm dấu được đặt trên bản đồ

Tạo tương tác bản đồ

Bản đồ có ích hơn nếu người dùng có thể nhấn vào điểm dấu để lấy được các thông tin chi tiết sự kiện, như ngày và một liên kết đến sự kiện này. Không khó thêm vào chức năng này.

Đầu tiên, hãy trích xuất thông tin bổ sung mà bạn muốn về sự kiện đó từ microdata đã phân tích cú pháp (xem Liệt kê 13).

Liệt kê 13. Lấy thông tin bổ sung
<script type="text/javascript">
    $(function() {
      map = $('#map_canvas');
      map.gmap().bind('init', function () {
        // Process the Microdata for each Event into an object.
        map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
          var eventName = result.properties.name[0];
          var logo = result.properties.image[0];
          var url = result.properties.url[0];
          var start = result.properties.startDate[0];

          ...
      });
    });
</script>

Trước khi bạn thêm điểm dấu vào bản đồ, hãy tạo một khối HTML với các thông tin chi tiết sự kiện (xem Liệt kê 14).

Liệt kê 14. Tạo HTML cho cửa sổ thông tin
            // Run the Geocoder request for the address.
            map.gmap('search', {'address': address } , function(result, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                // Create a LatLng object.
                var lat = result[0].geometry.location.lat();
                var lng = result[0].geometry.location.lng();
                var latlng = new google.maps.LatLng(lat, lng);
    
                var eventDetails = '';
                eventDetails += '<div class="iw">';
                eventDetails += '<img src="'+logo+'"></img>';
                eventDetails += '<h2><a href="'+url+'">'+eventName+'</a></h2>';
                eventDetails += new Date(start).toDateString();
                eventDetails += '</div>';
    
                // Place the marker.
                ...

Sau đó, thêm các thông tin chi tiết sự kiện cho điểm dấu bạn đang tạo ra. Sử dụng .click của jQuery để nói bạn muốn chạy chức năng nào khi ai đó nhấn vào điểm dấu đó. Trong chức năng này, hãy sử dụng chức năng của trình trợ giúp openInfoWindow do thư viện UI Maps của jQuery cung cấp để xây dựng cửa sổ và chỉ cần chuyển HTML của bạn làm nội dung cho cửa sổ đó (xem Liệt kê 15).

Liệt kê 15. Thêm Info Window (Cửa sổ Thông tin) như là một sự kiện nhấn chuột
            // Place the marker.
            ...
            map.gmap('addMarker', markerOptions).click( function() {
              map.gmap('openInfoWindow', { 'content': eventDetails }, this ); 
            });

Hãy nạp lại sau khi nhiệm vụ này được thực hiện rồi nhấn vào điểm dấu. Bạn sẽ thấy cửa sổ hiện lên với các thông tin chi tiết sự kiện (xem Hình 8).

Hình 8. Nhấn vào sự kiện trên điểm dấu
Ảnh chụp màn hình cửa sổ có các chi tiết sự kiện sau khi người dung nhấn chuột vào điểm dấu sự kiện

Để cải thiện dáng vẻ bề ngoài, hãy thêm một vài quy tắc CSS. Tôi đã thêm các quy tắc này vào mã ví dụ (xem Tải về). Cuối cùng, bản đồ của bạn tương tự như Hình 9.

Hình 9. Bản đồ cuối cùng
Ảnh chụp màn hình bản đồ cuối cùng có hai điểm dấu sự kiện, một cửa sổ bật lên và đầu đủ thông tin chi tiết sự kiện

Kết luận

Microdata giúp việc sử dụng dữ liệu trên trang của bạn theo các cách động dễ dàng hơn, như trên bản đồ của Google, khi sử dụng các trình cắm thêm của jQuery. Đặc tả microdata nói về các kịch bản lệnh chung mà bạn có thể sử dụng làm các trình cắm thêm trên các trang web không liên quan, khác nhau. Microdata cũng giúp kết hợp dữ liệu từ nhiều trang web khác nhau để tạo ra các ứng dụng mới dễ dàng hơn. Trong phần tiếp theo của loạt bài này, tôi sẽ giải thích cách bạn có thể sử dụng Drupal để tạo ra một ứng dụng như vậy.


Tải về

Mô tảTênKích thước
Article source codejquerymicrodatapt1_source.zip464KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=808443
ArticleTitle=Làm cho microdata của HTML5 có ích, Phần 1: Sử dụng jQuery ở trên microdata
publish-date=04042012