Визуализация данных 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 с атрибутом имени 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 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 .