Wyświetlam plik KML

Przegląd

W tym samouczku pokazujemy, 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 zobaczyć 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>

Zobacz, jak to działa

Możesz poeksperymentować 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 na potrzeby tego samouczka:

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

Konfigurowanie pliku KML do zaimportowania

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

Jeśli dopiero się uczysz i nie masz pliku KML, możesz wykonać te czynności:

  • W tym samouczku użyj następującego pliku KML:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml
    
  • Znajdź plik KML w internecie. Możesz użyć operatora wyszukiwania Google filetype.

    Zastąp wyszukiwane hasło velodromes lub pomiń je w całości, aby znaleźć wszystkie pliki KML.

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

  • Plik jest publicznie dostępny w internecie. Jest to wymagane w przypadku wszystkich aplikacji, które wczytują plik KML do pliku KMLLayer, dzięki czemu serwery Google mogą znaleźć i pobrać treść, aby wyświetlić ją na mapie.
  • Plik nie znajduje się na stronie chronionej hasłem.
  • Twoje obiekty zawierają okno informacyjne. Możesz umieścić te treści w elemencie description lub za pomocą elementów ExtendedData i zastępowania encji (więcej informacji znajdziesz poniżej). Oba rodzaje danych są dostępne w ramach właściwości infoWindowHtml.

Elementy ExtendedData

Plik KML w tym samouczku zawiera informacje o funkcjach w elemencie ExtendedData. Aby umieścić te informacje w opisie funkcji, użyj zastępowania encji, która jest zasadniczo zmienną w tagu BalloonStyle.

Kod tej sekcji znajduje się w tabeli poniżej.

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 pojedynczy element Style, który jest stosowany do wszystkich oznaczeń miejsc.
Ten element Style przypisuje wartość #[video] do elementu tekstowego BalloonStyle.
Format $[x] informuje parser KML, że ma wyszukać element Data o nazwie video i użyć go jako tekstu dymka.
<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 nazwy video.
Plik w tym samouczku wykorzystuje film z YouTube umieszczony jako wartość tekstu dymka każdego oznaczenia miejsca.

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

Wyświetlanie warstwy KML

Inicjuję mapę

W tej tabeli opisano kod 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 ją utworzyć.
Ten kod tworzy nowy obiekt Map Google, informuje go, gdzie należy wyśrodkować i powiększyć, oraz dołącza mapę do div.
Aby dowiedzieć się więcej o podstawach tworzenia Map Google, przeczytaj samouczek Dodawanie mapy Google do witryny.

Tworzenie warstwy KML

W tej tabeli opisano kod służący do tworzenia warstwy KMLLayer.

Kod i opis
var kmlLayer = new google.maps.KmlLayer();

Tworzy nowy obiekt KMLLayer do wyświetlenia pliku 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. Definiuje też właściwości obiektu KMLLayer:
  • Sprawia, że warstwa nie wyświetla okna informacyjnego po kliknięciu.
  • Sprawia, że mapa ma się wyśrodkować i powiększyć do ramki ograniczającej zawartość warstwy.
  • Ustawia mapę na utworzony wcześniej obiekt mapy.
Przewodnik po interfejsie Maps JavaScript API zawiera listę wszystkich opcji dostępnych w przypadku tej warstwy.
Wczytaj plik HTML, aby wyświetlić jego zawartość jako warstwę na mapie podstawowej. Jednak kliknięcie funkcji nie spowoduje jeszcze żadnych działań.

Wyświetlanie danych na pasku bocznym

W tej sekcji opisano ustawienia, które po kliknięciu obiektu na mapie pojawiają zawartość okna informacyjnego na pasku bocznym. W tym celu:

  • Wykrywa zdarzenie kliknięcia dowolnej funkcji warstwy KML.
  • Pobieranie danych klikniętego elementu.
  • Zapisywanie tych danych na pasku bocznym.

Dodawanie odbiornika

Mapy Google mają funkcję wykrywania zdarzeń użytkownika na mapie, takich jak kliknięcia czy naciśnięcia klawiszy, oraz reagowanie na nie. Dodaje odbiornik takich zdarzeń click.

Kod tej sekcji znajduje się w tabeli poniżej.

Kod i opis
kmlLayer.addListener('click', function(event) {});

Detektor zdarzeń kmlLayer.addListener obejmuje:
  • Typ detektora zdarzenia. W tym samouczku jest to zdarzenie click.
  • Funkcja, która musi zostać wywołana, gdy wystąpi zdarzenie.
Więcej informacji o zdarzeniach znajdziesz w przewodniku dla programistów.

Zapisywanie danych obiektów KML na pasku bocznym

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

Kod tej sekcji znajduje się w tabeli poniżej.

Kod i opis
var content = event.featureData.infoWindowHtml;

Zapisuje zawartość okna informacyjnego w zmiennej.
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Identyfikuje obiekt div, w którym ma być zapisany, i zastępuje w nim kod HTML treścią obiektu.
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 zostanie zaktualizowany i będzie wyświetlać zawartość jego okna informacyjnego.

Więcej informacji

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