Визуализация данных KML

Обзор

В этом руководстве показано, как отображать информацию из 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>

Начиная

Вот этапы создания карты и боковой панели для этого урока:

  1. Настройка KML-файла
  2. Отображение KML-слоя
  3. Отображение данных в боковой панели

Настройка KML-файла для импорта

Ваш KML-файл должен соответствовать стандарту KML. Подробную информацию об этом стандарте можно найти на веб-сайте Open Geospatial Consortium . Документация 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 объекта.

Элементы ExtendedData

В этом руководстве KML-файл содержит информацию о характеристиках объекта в элементе ExtendedData . Чтобы добавить эту информацию в описание объекта, используйте замену сущности , которая по сути является переменной в теге BalloonStyle .

В таблице ниже приведен код для этого раздела.

Код и описание 
<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>

В KML-файле содержится единственный элемент Style , который применяется ко всем меткам.
Этот элемент Style присваивает текстовому элементу BalloonStyle значение #[video] .
Формат $[x] указывает парсеру KML искать элемент Data с именем video и использовать его в качестве текста всплывающего окна. 
<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>

Каждый Placemark содержит элемент ExtendedData , который хранит элемент Data . Обратите внимание, что каждый Placemark имеет один элемент Data с атрибутом name равным video .
В этом руководстве в качестве значения текста всплывающего окна для каждого элемента Placemark используется встроенное видео с YouTube.

Более подробную информацию о замене сущностей можно найти в главе «Добавление пользовательских данных» документации KML.

Отображение KML-слоя

Инициализация карты

В этой таблице поясняется код данного раздела.

Код и описание 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

Для отображения KML-файла на карте необходимо сначала создать карту.
Этот код создает новый объект Google Map, указывает, где его центрировать и масштабировать, и прикрепляет карту к div .
Чтобы узнать больше об основах создания карты Google, прочтите руководство «Добавление карты Google на ваш сайт» .

Создание KML-слоя

В этой таблице объясняется код, создающий KMLLayer.

Код и описание 
var kmlLayer = new google.maps.KmlLayer();

Создает новый объект KMLLayer для отображения вашего 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
});

Конструктор KMLLayer задает URL-адрес вашего KML-файла. Он также определяет свойства объекта KMLLayer, которые выполняют следующие действия:
  • Указывает слою не отображать информационное окно при щелчке.
  • Указывает карте центрироваться и масштабироваться в соответствии с ограничивающим прямоугольником содержимого слоя.
  • Устанавливает в качестве объекта карты объект Map, созданный ранее.
В справочном руководстве по JavaScript API карт перечислены все доступные параметры для этого слоя.
Загрузите свой HTML-файл, чтобы отобразить содержимое KML-файла в виде слоя поверх базовой карты. Однако щелчок по любому объекту пока не приведет к каким-либо действиям.

Отображение данных в боковой панели

В этом разделе описываются настройки, позволяющие отображать содержимое информационного окна в боковой панели при щелчке по объекту на карте. Это делается следующим образом:

  • Отслеживание события клика по любому из элементов KMLLayer.
  • Получение данных о выбранном элементе.
  • Вывод этих данных в боковую панель.

Добавление обработчика событий

Google Maps предоставляет функцию для отслеживания и реагирования на события пользователя на карте, такие как клики или нажатия клавиш клавиатуры. Для таких событий click добавляется обработчик событий.

В таблице ниже приведен код для этого раздела.

Код и описание 
kmlLayer.addListener('click', function(event) {});

Обработчик событий kmlLayer.addListener фокусируется на следующем:
  • Тип события, которое следует отслеживать. В этом руководстве это событие click .
  • Функция, вызываемая при возникновении события.
Более подробную информацию о мероприятиях вы можете найти в Руководстве для разработчиков .

Вывод данных KML-объекта в боковую панель

На данном этапе обучения вы уже отслеживали события кликов по объектам слоя. Теперь вы можете настроить приложение так, чтобы оно выводило данные объекта и содержимое информационного окна в боковую панель.

В таблице ниже приведен код для этого раздела.

Код и описание 
var content = event.featureData.infoWindowHtml;

Записывает содержимое информационного окна в переменную. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Определяет div , в который нужно записать данные, и заменяет содержащийся в нем HTML-код содержимым функции. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Эти строки кода становятся функцией внутри конструктора addListener .

Теперь при каждом щелчке по KML-объекту на карте боковая панель обновляется, отображая содержимое информационного окна.

Более подробная информация

Подробнее об использовании KML-файлов можно прочитать здесь.