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:
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ówExtendedData
i zastępowania encji (więcej informacji znajdziesz poniżej). Oba rodzaje danych są dostępne w ramach właściwościinfoWindowHtml
.
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 | |
---|---|
|
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. |
|
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 | |
---|---|
|
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 | |
---|---|
|
Tworzy nowy obiekt KMLLayer do wyświetlenia pliku KML. |
|
Konstruktor KMLLayer ustawia adres URL pliku KML. Definiuje też właściwości obiektu KMLLayer:
|
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 | |
---|---|
|
Detektor zdarzeń kmlLayer.addListener obejmuje:
|
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 | |
---|---|
|
Zapisuje zawartość okna informacyjnego w zmiennej. |
|
Identyfikuje obiekt div , w którym ma być zapisany, i zastępuje w nim kod HTML treścią obiektu.
|
|
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.