Визуализация данных 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-файл в интернете можно с помощью оператора поиска Google filetype .

    Замените любой поисковый термин на 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 .
Файл для этого руководства использует встроенное видео YouTube в качестве значения текста всплывающей подсказки каждой метки.

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

Отображение KMLLayer

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

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

Код и описание 
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 на ваш веб-сайт» .

Создание KMLLayer

В этой таблице объясняется код, создающий 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, которые выполняют следующие действия:
  • Указывает слою не отображать информационное окно при щелчке.
  • Приказывает карте центрироваться и масштабироваться по ограничивающей рамке содержимого слоя.
  • Устанавливает карту на основе объекта «Карта», созданного ранее.
В справочном руководстве Maps JavaScript API перечислены все доступные параметры для этого слоя.
Загрузите HTML-файл, чтобы отобразить содержимое KML-файла в виде слоя поверх базовой карты. Однако нажатие на любой объект пока не приводит к каким-либо действиям.

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

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

  • Прослушивание события щелчка по любому из объектов KMLLayer.
  • Сбор данных выбранного объекта.
  • Запись этих данных на боковую панель.

Добавление прослушивателя событий

Google Карты предоставляют функцию для отслеживания и реагирования на пользовательские события на карте, такие как щелчки мыши или нажатия клавиш. Функция добавляет прослушиватель для таких 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 .