Обзор
В этом руководстве показано, как отобразить информацию о файле KML на карте Google и боковой панели. Дополнительную информацию об использовании файлов KML на картах можно найти в руководстве по слоям KML . Попробуйте нажать на маркер на карте ниже, чтобы просмотреть данные на боковой панели.
В разделе ниже показан весь код, необходимый для создания карты и боковой панели.
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>
Попробуйте сами
Вы можете поэкспериментировать с этим кодом в JSFiddle, щелкнув значок <>
в правом верхнем углу окна кода.
<!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>
Начиная
Вот этапы создания карты и боковой панели для этого урока:
Настройка файла KML для импорта
Ваш файл KML должен соответствовать стандарту KML. Подробную информацию об этом стандарте можно найти на веб-сайте Открытого геопространственного консорциума . Документация Google KML также описывает язык и предлагает как справочную, так и концептуальную документацию для разработчиков.
Если вы только учитесь и у вас нет файла KML, вы можете:
Для этого урока используйте следующий файл KML:
https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml
Найдите файл KML в Интернете. Вы можете использовать оператор поиска
filetype
Google.Замените любой поисковый запрос на
velodromes
или вообще опустите этот термин, чтобы найти все файлы KML.
Если вы создаете свой собственный файл, код в этом примере предполагает, что:
- Вы публично разместили файл в Интернете. Это требование для всех приложений, загружающих KML в
KMLLayer
, чтобы серверы Google могли находить и извлекать контент для отображения его на карте. - Файл не находится на странице, защищенной паролем.
- Ваши функции имеют содержимое информационного окна. Вы можете содержать это содержимое в элементе
description
или включить его с помощью элементаExtendedData
и замены сущности (дополнительную информацию см. ниже). Оба доступны через свойствоinfoWindowHtml
функции.
Элементы расширенных данных
Файл KML в этом руководстве содержит информацию о функциях в элементе ExtendedData
. Чтобы внести эту информацию в описание функции, используйте замену сущности , которая по сути является переменной в теге BalloonStyle
.
В таблице ниже поясняется код для этого раздела.
Код и описание | |
---|---|
| В файле KML есть один элемент Style , который применяется ко всем меткам.Этот элемент Style присваивает значение #[video] текстовому элементу BalloonStyle .Формат $[x] указывает синтаксическому анализатору KML искать элемент Data с именем video и использовать его в качестве текста всплывающей подсказки. |
| Каждая Placemark содержит элемент ExtendedData , который содержит элемент Data . Обратите внимание, что каждая Placemark имеет один элемент Data с атрибутом имени video .В файле этого руководства в качестве значения текста всплывающей подсказки каждой метки используется встроенное видео YouTube. |
Подробнее о замене сущностей можно узнать в главе «Добавление пользовательских данных» документации KML.
Отображение слоя KMLLayer
Инициализация карты
В этой таблице поясняется код для этого раздела.
Код и описание | |
---|---|
| Чтобы отобразить KML на карте, вам необходимо сначала создать карту. Этот код создает новый объект Google Map, сообщает ему, где центрировать и масштабировать, и присоединяет карту к div .Чтобы узнать больше об основах создания карты Google, прочтите руководство по добавлению карты Google на ваш веб-сайт . |
Создание слоя KMLLayer
В этой таблице объясняется код, создающий KMLLayer.
Код и описание | |
---|---|
| Создает новый объект KMLLayer для отображения вашего KML. |
| Конструктор KMLLayer задает URL-адрес вашего файла KML. Он также определяет свойства объекта KMLLayer, которые выполняют следующие действия:
|
Отображение данных на боковой панели
В этом разделе описаны настройки, которые отображают содержимое информационного окна на боковой панели, когда вы щелкаете объект на карте. Это делается:
- Прослушивание события щелчка на любой из функций KMLLayer.
- Получение данных о выбранном объекте.
- Запись этих данных на боковую панель.
Добавление прослушивателя событий
Карты Google предоставляют функцию прослушивания и реагирования на пользовательские события на карте, такие как щелчки мышью или нажатия клавиш на клавиатуре. Он добавляет прослушиватель таких событий click
.
В таблице ниже поясняется код этого раздела.
Код и описание | |
---|---|
| Прослушиватель событий kmlLayer.addListener фокусируется на следующем:
|
Запись данных объекта KML на боковую панель
На этом этапе руководства вы зафиксировали события щелчков на объектах слоя. Теперь вы можете настроить приложение на запись данных функции и содержимого информационного окна на боковую панель.
В таблице ниже поясняется код этого раздела.
Код и описание | |
---|---|
| Записывает содержимое информационного окна в переменную. |
| Идентифицирует div для записи и заменяет HTML в нем содержимым функции. |
| Эти строки кода становятся функцией внутри конструктора addListener . |
Теперь каждый раз, когда вы щелкаете объект KML на карте, боковая панель обновляется и отображает содержимое информационного окна.
Дополнительная информация
Узнайте больше об использовании файлов KML .