Hiển thị dữ liệu KML

Tổng quan

Hướng dẫn này cho bạn biết cách hiển thị thông tin của tệp KML trong bản đồ Google và thanh bên. Để biết thêm thông tin về cách sử dụng tệp KML trong bản đồ, hãy đọc hướng dẫn về Lớp KML. Hãy thử nhấp vào một điểm đánh dấu trên bản đồ bên dưới để xem dữ liệu trong thanh bên.

Phần bên dưới hiển thị toàn bộ mã bạn cần để tạo bản đồ và thanh bên.

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Tự thử

Bạn có thể thử nghiệm mã này trong JSFiddle bằng cách nhấp vào biểu tượng <> ở góc trên cùng bên phải của cửa sổ mã.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Bắt đầu

Dưới đây là các bước để tạo bản đồ và thanh bên cho hướng dẫn này:

  1. Thiết lập tệp KML
  2. Hiển thị KMLlayer
  3. Hiển thị dữ liệu trong thanh bên

Thiết lập tệp KML để nhập

Tệp KML của bạn phải tuân thủ tiêu chuẩn KML. Để biết thông tin chi tiết về tiêu chuẩn này, hãy tham khảo trang web của Open Geospatial Consortium. Tài liệu KML của Google cũng mô tả ngôn ngữ này và cung cấp cả tài liệu tham khảo và tài liệu khái niệm dành cho nhà phát triển.

Nếu mới tìm hiểu và chưa có tệp KML, bạn có thể:

  • Sử dụng tệp KML sau đây cho hướng dẫn này:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Tìm tệp KML trên web. Bạn có thể sử dụng toán tử tìm kiếm filetype của Google.

    Thay thế bất kỳ cụm từ tìm kiếm nào cho velodromes hoặc bỏ qua hoàn toàn cụm từ đó để tìm tất cả tệp KML.

Nếu bạn đang tạo tệp của riêng mình, mã trong ví dụ này giả định rằng:

  • Bạn đã lưu trữ công khai tệp trên Internet. Đây là yêu cầu đối với tất cả ứng dụng tải KML vào KMLLayer để máy chủ của Google có thể tìm và truy xuất nội dung để hiển thị nội dung đó trên bản đồ.
  • Tệp không nằm trên trang được bảo vệ bằng mật khẩu.
  • Các tính năng của bạn có nội dung cửa sổ thông tin. Bạn có thể chứa nội dung này trong phần tử description hoặc đưa nội dung này vào bằng phần tử ExtendedData và thay thế thực thể (hãy đọc phần bên dưới để biết thêm thông tin). Bạn có thể truy cập vào cả hai dưới dạng thuộc tính infoWindowHtml của tính năng.

Phần tử ExtendedData

Tệp KML trong hướng dẫn này bao gồm thông tin về đối tượng trong phần tử ExtendedData. Để đưa thông tin này vào phần mô tả của tính năng, hãy sử dụng tính năng thay thế thực thể. Về cơ bản, đây là một biến trong thẻ BalloonStyle.

Bảng dưới đây giải thích mã cho phần này.

Mã và nội dung mô tả 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

Tệp KML có một phần tử Style duy nhất được áp dụng cho tất cả các điểm đánh dấu.
Phần tử Style này gán giá trị #[video] cho phần tử văn bản của BalloonStyle.
Định dạng $[x] yêu cầu trình phân tích cú pháp KML tìm kiếm một thành phần Data có tên là video và sử dụng thành phần đó làm văn bản bong bóng trò chuyện.		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

Mỗi Placemark chứa một phần tử ExtendedData, phần tử này chứa phần tử Data. Lưu ý rằng mỗi Placemark có một phần tử Data duy nhất với thuộc tính tên là video.
Tệp cho hướng dẫn này sử dụng video trên YouTube được nhúng làm giá trị của văn bản bong bóng của mỗi Điểm đánh dấu.

Bạn có thể tìm hiểu thêm về việc thay thế thực thể trong chương Thêm dữ liệu tuỳ chỉnh của tài liệu KML.

Hiển thị KMLLayer

Khởi chạy bản đồ

Bảng này giải thích mã cho phần này.

Mã và nội dung mô tả 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

Để hiển thị KML trên bản đồ, trước tiên, bạn cần tạo bản đồ.
Mã này tạo một đối tượng Google Map mới, cho biết vị trí căn giữa và thu phóng, và đính kèm bản đồ vào div.
Để tìm hiểu thêm về kiến thức cơ bản về cách tạo Bản đồ của Google, hãy đọc hướng dẫn Thêm Bản đồ của Google vào trang web.

Tạo KMLLayer

Bảng này giải thích mã tạo KMLLayer.

Mã và nội dung mô tả 
var kmlLayer = new google.maps.KmlLayer();

Tạo một đối tượng KMLLayer mới để hiển thị KML.		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

Hàm khởi tạo KMLLayer đặt URL của tệp KML. Lớp này cũng xác định các thuộc tính cho đối tượng KMLLayer thực hiện những việc sau:
  • Yêu cầu lớp không hiển thị cửa sổ thông tin khi được nhấp vào.
  • Yêu cầu bản đồ căn giữa và thu phóng đến hộp giới hạn của nội dung lớp.
  • Đặt bản đồ thành đối tượng Map đã tạo trước đó.
Hướng dẫn tham khảo API JavaScript của Maps liệt kê tất cả các tuỳ chọn có sẵn cho lớp này.
Tải tệp HTML để hiển thị nội dung tệp KML dưới dạng một lớp trên bản đồ cơ sở. Tuy nhiên, việc nhấp vào bất kỳ tính năng nào cũng chưa dẫn đến hành động nào.

Hiển thị dữ liệu trong thanh bên

Phần này giải thích các chế độ cài đặt hiển thị nội dung cửa sổ thông tin trong thanh bên khi bạn nhấp vào một đối tượng trên bản đồ. Bạn có thể thực hiện việc này bằng cách:

  • Theo dõi sự kiện nhấp trên bất kỳ tính năng nào của KMLLayer.
  • Lấy dữ liệu của tính năng đã nhấp.
  • Ghi dữ liệu đó vào thanh bên.

Thêm trình nghe sự kiện

Google Maps cung cấp một hàm để nghe và phản hồi các sự kiện của người dùng trên bản đồ, chẳng hạn như lượt nhấp hoặc thao tác nhấn phím. Phương thức này thêm trình nghe cho các sự kiện click như vậy.

Bảng dưới đây giải thích mã cho phần này.

Mã và nội dung mô tả 
kmlLayer.addListener('click', function(event) {});

Trình nghe sự kiện kmlLayer.addListener tập trung vào những nội dung sau:
  • Loại sự kiện cần nghe. Trong hướng dẫn này, đó là sự kiện click.
  • Hàm để gọi khi sự kiện xảy ra.
Bạn có thể tìm hiểu thêm về các sự kiện trong Hướng dẫn dành cho nhà phát triển.

Ghi dữ liệu đối tượng KML vào thanh bên

Ở giai đoạn này của hướng dẫn, bạn đã ghi lại các sự kiện nhấp trên các tính năng của lớp. Giờ đây, bạn có thể thiết lập ứng dụng để ghi dữ liệu của tính năng và nội dung cửa sổ thông tin vào thanh bên.

Bảng dưới đây giải thích mã cho phần này.

Mã và nội dung mô tả 
var content = event.featureData.infoWindowHtml;

Ghi nội dung cửa sổ thông tin vào một biến. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Xác định div cần ghi và thay thế HTML trong đó bằng nội dung của tính năng. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Các dòng mã này trở thành hàm trong hàm khởi tạo addListener.

Giờ đây, mỗi khi bạn nhấp vào một đối tượng KML trên bản đồ, thanh bên sẽ cập nhật để hiển thị nội dung cửa sổ thông tin của đối tượng đó.

Thông tin khác

Đọc thêm về cách sử dụng tệp KML.