Wyświetlanie danych KML

Omówienie

Ten samouczek pokazuje, jak wyświetlać informacje z pliku KML na mapie i w bocznym panelu Map Google. 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

Przygotowanie 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 zawiera opis języka oraz dokumentację odwołującą się do pojęć i dokumentację odwołującą się do koncepcji.

Jeśli dopiero się uczysz i nie masz pliku KML, możesz:

  • W tym samouczku 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 w Google.

    Zastąp dowolne wyszukiwane hasło ciągiem znaków velodromes lub pomiń je całkowicie, 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ą plik KML do KMLLayer, aby serwery Google mogły znaleźć i pobrać zawartość i wyświetlić ją na mapie.
  • Plik nie znajduje się na stronie chronionej hasłem.
  • Twoje funkcje mają zawartość okna informacyjnego. Możesz umieścić te treści w elemencie description lub za pomocą elementu ExtendedData i zastąpienia elementu (więcej informacji znajdziesz poniżej). Oba są dostępne jako atrybut infoWindowHtml funkcji.

Elementy ExtendedData

Plik KML w tym samouczku zawiera informacje o elementach w elemencie ExtendedData. Aby uwzględnić te informacje w opisie funkcji, użyj zastępstwa wartości, które jest w podstawie zmienną w tagu BalloonStyle.

W tabeli poniżej znajdziesz opis kodu 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 1 element Style, który jest stosowany do wszystkich znaczników miejsca.
Ten element Style przypisuje elementowi tekstowemu BalloonStyle wartość #[video].
Format $[x] informuje parsownik KML, aby szukał elementu Data o nazwie video i użył go jako tekstu okienka.		 
<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 jeden element Data z atrybutem name o wartości video.
Plik do tego samouczka używa umieszczonego filmu z YouTube jako wartości tekstu okienka każdego znacznika.

Więcej informacji o zastępowaniu elementów znajdziesz w artykule Dodawanie danych niestandardowych w dokumentacji KML.

Wyświetlanie warstwy KML

Inicjowanie mapy

Ta tabela wyjaśnia 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 utworzyć mapę.
Ten kod tworzy nowy obiekt Map Google, określa, gdzie ma być środek mapy i na ile ma być powiększona, a następnie dołącza mapę do div.
Aby dowiedzieć się więcej o podstawach tworzenia mapy Google, przeczytaj samouczek Dodawanie mapy Google do witryny.

Tworzenie warstwy KML

Ta tabela zawiera opis kodu, który tworzy warstwę KML.

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

Tworzy nowy obiekt KMLLayer, aby wyświetlić 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 URL pliku KML. Określa też właściwości obiektu KMLLayer, które:
  • Informuje warstwę, aby nie wyświetlała okna z informacjami po kliknięciu.
  • Informuje mapę, aby wyśrodkowała i powiększyła zawartość zaznaczenia.
  • Ustawia mapę na utworzony wcześniej obiekt Map.
Przewodnik po interfejsie Maps JavaScript API zawiera 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 żadnego działania.

Wyświetlanie danych na pasku bocznym

W tej sekcji wyjaśniamy, które ustawienia powodują wyświetlanie zawartości okna informacyjnego na pasku bocznym po kliknięciu elementu na mapie. Aby to zrobić:

  • Nasłuchuje zdarzenia kliknięcia w przypadku dowolnej funkcji KMLLayer.
  • Pobieranie danych funkcji, na którą użytkownik kliknął.
  • zapisywanie tych danych na pasku bocznym.

Dodawanie detektora zdarzeń

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

W tabeli poniżej znajdziesz opis kodu tej sekcji.

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

Detektor zdarzeń kmlLayer.addListener skupia się na:
  • Typ zdarzenia, na które ma być nasłuchiwany. W tym samouczku jest to zdarzenie click.
  • Funkcja, którą należy wywołać po wystąpieniu zdarzenia.
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 związane z funkcjami warstwy. Możesz teraz skonfigurować aplikację tak, aby zapisywała dane funkcji i treści okna z informacjami na pasku bocznym.

W tabeli poniżej znajdziesz opis kodu tej sekcji.

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

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

Określa div, do którego ma być zapisywany kod, 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 zostanie zaktualizowany, aby wyświetlić zawartość okna informacji.

Więcej informacji

Dowiedz się więcej o używaniu plików KML.