Визуализация данных 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. Подробную информацию об этом стандарте можно найти на веб-сайте Открытого геопространственного консорциума . Документация 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 .

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

Код и описание 
<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 присваивает значение #[video] текстовому элементу BalloonStyle .
Формат $[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 с атрибутом имени 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, которые выполняют следующие действия:
  • Указывает слою не отображать информационное окно при нажатии.
  • Приказывает карте центрироваться и приближаться к ограничивающей рамке содержимого слоя.
  • Устанавливает карту для объекта Map, созданного ранее.
В справочном руководстве 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 .