Wyświetlanie danych KML

Przegląd

Z tego samouczka dowiesz się, jak wyświetlać informacje z pliku KML na mapie Google i na pasku bocznym. Więcej informacji o używaniu plików KML na mapach znajdziesz w przewodniku po warstwach KML. Kliknij znacznik na mapie poniżej, aby wyświetlić dane na pasku bocznym.

W sekcji poniżej znajdziesz cały kod potrzebny do utworzenia mapy i paska bocznego.

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>

Wypróbuj

Możesz eksperymentować z tym kodem w JSFiddle, klikając ikonę <> w prawym górnym rogu okna kodu.

<!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>

Pierwsze kroki

Oto etapy tworzenia mapy i paska bocznego w tym samouczku:

  1. Konfigurowanie pliku KML
  2. Wyświetlanie warstwy KML
  3. Wyświetlanie danych na pasku bocznym

Przygotowywanie pliku KML do importu

Plik KML powinien być zgodny ze standardem KML. Szczegółowe informacje o tym standardzie znajdziesz na stronie Open Geospatial Consortium. Dokumentacja KML Google opisuje też język i zawiera dokumentację dla deweloperów, zarówno referencyjną, jak i koncepcyjną.

Jeśli dopiero zaczynasz i nie masz pliku KML, możesz:

  • Na potrzeby tego samouczka użyj tego pliku KML:

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

  • Znajdź plik KML w internecie. Możesz użyć operatora wyszukiwania filetype.

    Zastąp dowolnym wyszukiwanym hasłem symbol velodromes lub całkowicie pomiń to hasło, aby znaleźć wszystkie pliki KML.

Jeśli tworzysz własny plik, kod w tym przykładzie zakłada, że:

  • plik jest publicznie hostowany w internecie; Jest to wymagane w przypadku wszystkich aplikacji, które wczytują pliki KML do elementu KMLLayer, aby serwery Google mogły znaleźć i pobrać treść do wyświetlenia na mapie.
  • Plik nie znajduje się na stronie chronionej hasłem.
  • Obiekty mają zawartość okna informacyjnego. Możesz umieścić te treści w elemencie description lub dodać je za pomocą elementu ExtendedData i zastępowania encji (więcej informacji znajdziesz poniżej). Oba są dostępne jako właściwość infoWindowHtml funkcji.

Elementy ExtendedData

Plik KML w tym samouczku zawiera informacje o obiekcie w elemencie ExtendedData. Aby przenieść te informacje do opisu funkcji, użyj zastępowania encji, czyli zmiennej w tagu BalloonStyle.

W tabeli poniżej znajdziesz wyjaśnienie kodu w tej sekcji.

Kod i opis 
<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>
Plik KML zawiera jeden element Style, który jest stosowany do wszystkich znaczników miejsca.
Ten element Style przypisuje wartość #[video] do elementu tekstowego BalloonStyle.
Format $[x] informuje parser KML, że ma szukać elementu Data o nazwie video i użyć go jako tekstu dymku.		 
<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>
Każdy element Placemark zawiera element ExtendedData, który zawiera element Data. Zwróć uwagę, że każdy element Placemark ma pojedynczy element Data z atrybutem name o wartości video.
Plik użyty w tym samouczku wykorzystuje osadzony film z YouTube jako wartość tekstu dymku każdego znacznika miejsca.

Więcej informacji o zastępowaniu jednostek znajdziesz w rozdziale Dodawanie danych niestandardowych w dokumentacji KML.

Wyświetlanie warstwy KMLLayer

Inicjowanie mapy

W tej tabeli znajdziesz wyjaśnienie kodu tej sekcji.

Kod i opis 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}
Aby wyświetlić plik KML na mapie, musisz najpierw utworzyć mapę.
Ten kod tworzy nowy obiekt Mapy Google, określa jego środek i poziom powiększenia oraz dołącza mapę do elementu div.
Aby dowiedzieć się więcej o podstawach tworzenia mapy Google, przeczytaj samouczek Dodawanie mapy Google do witryny.

Tworzenie warstwy KMLLayer

W tej tabeli znajdziesz wyjaśnienie kodu, który tworzy warstwę KMLLayer.

Kod i opis 
var kmlLayer = new google.maps.KmlLayer();
Tworzy nowy obiekt KMLLayer, który wyświetla plik 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
});
Konstruktor KMLLayer ustawia adres URL pliku KML. Określa też właściwości obiektu KMLLayer, które:
  • Informuje warstwę, aby nie wyświetlała okna informacyjnego po kliknięciu.
  • Nakazuje wyśrodkowanie mapy i powiększenie jej do ramki ograniczającej zawartość warstwy.
  • Ustawia mapę na obiekt Map utworzony wcześniej.
W przewodniku po interfejsie Maps JavaScript API znajdziesz wszystkie dostępne opcje tej warstwy.
Wczytaj plik HTML, aby wyświetlić zawartość pliku KML jako warstwę na mapie bazowej. Kliknięcie dowolnej funkcji nie spowoduje jednak jeszcze żadnej akcji.

Wyświetlanie danych na pasku bocznym

W tej sekcji opisujemy ustawienia, które wyświetlają zawartość okna informacyjnego na pasku bocznym po kliknięciu elementu na mapie. Jest to możliwe ze względu na te kwestie:

  • Nasłuchiwanie zdarzenia kliknięcia na dowolnym obiekcie warstwy KMLLayer.
  • Pobieranie danych klikniętej funkcji.
  • zapisywanie tych danych na pasku bocznym.

Dodawanie detektora zdarzeń

Mapy Google udostępniają funkcję nasłuchiwania zdarzeń użytkownika na mapie i reagowania na nie, takich jak kliknięcia czy naciśnięcia klawiszy klawiatury. Dodaje detektor takich zdarzeń click.

W tabeli poniżej znajdziesz wyjaśnienie kodu w tej sekcji.

Kod i opis 
kmlLayer.addListener('click', function(event) {});
Detektor zdarzeń kmlLayer.addListener koncentruje się na tych elementach:
  • Typ zdarzenia, którego chcesz nasłuchiwać. W tym samouczku jest to zdarzenie click.
  • Funkcja, którą należy wywołać, gdy wystąpi zdarzenie.
Więcej informacji o zdarzeniach znajdziesz w Przewodniku dla deweloperów.

Zapisywanie danych funkcji KML na pasku bocznym

Na tym etapie samouczka masz już zarejestrowane zdarzenia kliknięcia elementów warstwy. Możesz teraz skonfigurować aplikację tak, aby zapisywała dane funkcji i zawartość okna informacyjnego na pasku bocznym.

W tabeli poniżej znajdziesz wyjaśnienie kodu w tej sekcji.

Kod i opis 
var content = event.featureData.infoWindowHtml;
Zapisuje treść okna informacyjnego w zmiennej. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
Określa div, do którego ma zostać zapisana treść, i zastępuje w nim kod HTML treścią funkcji. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});
Te wiersze kodu stają się funkcją w konstruktorze addListener.

Teraz za każdym razem, gdy klikniesz na mapie obiekt KML, pasek boczny będzie się aktualizować, aby wyświetlać zawartość okna informacji.

Więcej informacji

Dowiedz się więcej o korzystaniu z plików KML.