Hiển thị KML

Tổng quan

Hướng dẫn này trình bày cách hiển thị thông tin của một tệp KML trong bản đồ và thanh bên của Google. Để 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>

Thử ngay

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

Đây là các giai đoạn để 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ị lớp KML
  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 phù hợp với 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 Open Geospatial Consortium. Tài liệu KML của Google cũng mô tả ngôn ngữ, đồng thời 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 chỉ đang tìm hiểu và không 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 một 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ừ này để tìm tất cả cá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, để các máy chủ của Google có thể tìm thấy và truy xuất nội dung nhằm 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 đối tượ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 một phần tử description hoặc thêm nội dung đó bằng phần tử ExtendedData và thay thế thực thể (đọc bên dưới để biết thêm thông tin). Bạn có thể truy cập cả hai dưới dạng thuộc tính infoWindowHtml của tính năng này.

Phần tử ExtendedData

Tệp KML trong hướng dẫn này bao gồm thông tin về tính năng trong một phần tử ExtendedData. Để đưa thông tin này vào phần mô tả tính năng, hãy sử dụng tuỳ chọn thay thế thực thể, về cơ bản 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 dấu vị trí.
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] sẽ yêu cầu trình phân tích cú pháp KML tìm phần tử Data có tên video và sử dụng phần tử đó làm văn bản hộp chú giải.		 
<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 chứa phần tử Data. Xin lưu ý rằng mỗi Placemark có một phần tử Data duy nhất có thuộc tính tên là video.
Tệp cho hướng dẫn này sử dụng video trên YouTube đã nhúng làm giá trị của văn bản trong hộp chú giải trong Dấu vị trí.

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 Maps mới, cho đối tượng này biết vị trí cần căn giữa và thu phóng, đồng thời đính kèm bản đồ vào div.
Để tìm hiểu thêm những kiến thức cơ bản về cách tạo Google Maps, hãy đọc hướng dẫn Thêm Google Maps vào trang web của bạn.

Tạo KMLLayer

Bảng này giải thích mã tạo ra 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 của bạn.		 
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 cho tệp KML của bạn. Tệ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 trong lớp.
  • Đặt bản đồ thành đối tượng Bản đồ được tạo trước đó.
Hướng dẫn tham khảo API Maps JavaScript liệt kê tất cả các tuỳ chọn có sẵn cho lớp này.
Tải tệp HTML của bạn để hiển thị nội dung tệp KML dưới dạng một lớp trên đầu bản đồ cơ sở. Tuy nhiên, việc nhấp vào một tính năng bất kỳ vẫn 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 đồ. Việc này được thực hiện bởi:

  • Theo dõi sự kiện nhấp chuột 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 chức năng 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ư thao tác nhấp hoặc nhấn phím trên bàn phím. Thêm một 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 theo dõi. Trong hướng dẫn này, đó là sự kiện click.
  • Một hàm cần 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 chuột trên các tính năng của lớp. Bây giờ, 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 lần 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 cửa sổ thông tin.

Thông tin khác

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