KML verilerini görüntüleme

Genel Bakış

Bu eğitimde, bir KML dosyasının bilgilerinin Google Haritalar'da ve kenar çubuğunda nasıl görüntüleneceği gösterilmektedir. KML dosyalarını haritalarda kullanma hakkında daha fazla bilgi için KML katmanları kılavuzunu okuyun. Kenar çubuğundaki verileri görmek için aşağıdaki haritada bir işaretçiyi tıklamayı deneyin.

Aşağıdaki bölümde, haritayı ve kenar çubuğunu oluşturmak için ihtiyacınız olan kodun tamamı gösterilmektedir.

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>

Kendiniz deneyin

Kod penceresinin sağ üst köşesindeki <> simgesini tıklayarak bu kodu JSFiddle'de deneyebilirsiniz.

<!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>

Başlarken

Bu eğitim için haritayı ve kenar çubuğunu oluşturma adımları şunlardır:

  1. KML dosyasını ayarlama
  2. KML katmanını görüntüleme
  3. Verileri kenar çubuğunda görüntüleme

KML dosyasını içe aktarma için ayarlama

KML dosyanız KML standardına uygun olmalıdır. Bu standart hakkında ayrıntılı bilgi için Open Geospatial Consortium web sitesine bakın. Google'ın KML dokümanları da dili açıklar ve hem referans hem de kavramsal geliştirici dokümanları sunar.

Yeni başlıyorsanız ve KML dosyanız yoksa şunları yapabilirsiniz:

  • Bu eğitim için aşağıdaki KML dosyasını kullanın:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Web'de bir KML dosyası bulun. Google'ın filetype arama operatörünü kullanabilirsiniz.

    Tüm KML dosyalarını bulmak için arama terimini velodromes ile değiştirin veya terimi tamamen çıkarın.

Kendi dosyanızı oluşturuyorsanız bu örnekteki kodda aşağıdakiler varsayılır:

  • Dosyayı internette herkese açık olarak barındırdıysanız Bu, Google sunucularının harita üzerinde görüntülemek için içeriği bulup alabilmesi amacıyla, KML'yi bir KMLLayer içine yükleyen tüm uygulamalar için bir şarttır.
  • Dosya, şifre korumalı bir sayfada yer almıyor.
  • Özelliklerinizde bilgi penceresi içeriği var. Bu içeriği bir description öğesinde veya ExtendedData öğesi ve varlık değiştirme özelliğini kullanarak ekleyebilirsiniz (daha fazla bilgi için aşağıyı okuyun). Her ikisine de özelliğin infoWindowHtml mülkü olarak erişilebilir.

ExtendedData öğeleri

Bu eğitimdeki KML dosyası, ExtendedData öğesinde özellik bilgilerini içerir. Bu bilgileri özelliğin açıklamasına eklemek için BalloonStyle etiketindeki bir değişken olan varlık değiştirme özelliğini kullanın.

Aşağıdaki tabloda bu bölümün kodu açıklanmaktadır.

Kod ve açıklama 
<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 dosyasında, tüm yer işaretlerine uygulanan tek bir Style öğesi vardır.
Bu Style öğesi, BalloonStyle öğesinin metin öğesine #[video] değerini atar.
$[x] biçimi, KML ayrıştırıcısına video adlı bir Data öğesi aramasını ve bunu balon metni olarak kullanmasını söyler.		 
<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>
Her Placemark, Data öğesini barındıran bir ExtendedData öğesi içerir. Her Placemark öğesinin, video ad özelliğine sahip tek bir Data öğesine sahip olduğunu unutmayın.
Bu eğitimdeki dosyada, her bir yer işaretinin balon metni değeri olarak yerleşik YouTube videosu kullanılır.

KML dokümanının Özel Veri Ekleme bölümünde öğe değiştirme hakkında daha fazla bilgi edinebilirsiniz.

KMLLayer'ı görüntüleme

Haritayı başlatma

Bu tabloda, bu bölümün kodu açıklanmaktadır.

Kod ve açıklama 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}
KML'yi bir haritada görüntülemek için önce haritayı oluşturmanız gerekir.
Bu kod yeni bir Google Haritalar nesnesi oluşturur, bu nesneye nereden merkezleneceğini ve yakınlaşacağını söyler ve haritayı div öğesine ekler.
Google Haritası oluşturmanın temelleri hakkında daha fazla bilgi edinmek için Web sitenize Google Haritası ekleme eğitimini okuyun.

KMLLayer oluşturma

Bu tabloda, KMLLayer oluşturan kod açıklanmaktadır.

Kod ve açıklama 
var kmlLayer = new google.maps.KmlLayer();
KML'nizi görüntülemek için yeni bir KMLLayer nesnesi oluşturur.		 
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 kurucusu, KML dosyanızın URL'sini ayarlar. Ayrıca, KMLLayer nesnesi için aşağıdaki işlemleri yapan özellikleri de tanımlar:
  • Katmanın, tıklandığında bilgi penceresi göstermemesini söyler.
  • Haritayı, katmanın içeriğinin sınır kutusuna odaklayıp yakınlaştırmasını söyler.
  • Haritayı daha önce oluşturulan Harita nesnesine ayarlar.
Maps JavaScript API referans kılavuzunda bu katman için kullanılabilen tüm seçenekler listelenir.
KML dosyası içeriğini ana haritanın üstünde bir katman olarak görüntülemek için HTML dosyanızı yükleyin. Ancak herhangi bir özelliği tıkladığınızda henüz işlem yapılmaz.

Verileri kenar çubuğunda görüntüleme

Bu bölümde, haritadaki bir özelliği tıkladığınızda bilgi penceresi içeriğini kenar çubuğunda gösteren ayarlar açıklanmaktadır. Bu işlem için:

  • KMLLayer'ın özelliklerinden herhangi birinde tıklama etkinliği dinleniyor.
  • Tıklanan özelliğin verilerini alma.
  • Bu verileri kenar çubuğuna yazma

Etkinlik işleyici ekleme

Google Haritalar, haritadaki kullanıcı etkinliklerini (ör. tıklamalar veya klavye tuşlarına basmalar) dinlemek ve yanıtlamak için bir işlev sağlar. Bu tür click etkinlikleri dinleyen bir işleyici ekler.

Aşağıdaki tabloda bu bölümün kodu açıklanmaktadır.

Kod ve açıklama 
kmlLayer.addListener('click', function(event) {});
kmlLayer.addListener etkinlik işleyici aşağıdakilere odaklanır:
  • Dinlenecek etkinlik türü. Bu eğitimde click etkinliği kullanılmaktadır.
  • Etkinlik gerçekleştiğinde çağrılacak işlev.
Etkinlikler hakkında daha fazla bilgiyi Geliştirici Kılavuzu'nda bulabilirsiniz.

KML özellik verilerini kenar çubuğuna yazma

Eğitimin bu aşamasında, katmanın özelliklerindeki tıklama etkinliklerini yakaladınız. Artık uygulamayı, özelliğin verilerini ve bilgi penceresi içeriğini kenar çubuğuna yazacak şekilde ayarlayabilirsiniz.

Aşağıdaki tabloda bu bölümün kodu açıklanmaktadır.

Kod ve açıklama 
var content = event.featureData.infoWindowHtml;
Bilgi penceresi içeriğini bir değişkene yazar. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
Yazılacak div öğesini tanımlar ve içindeki HTML'yi özelliğin içeriğiyle değiştirir. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});
Bu kod satırları, addListener sınıfının içindeki işlev olur.

Artık haritadaki bir KML özelliğini her tıkladığınızda bilgi penceresi içeriğini göstermek için kenar çubuğu güncellenir.

Daha fazla bilgi

KML dosyalarını kullanma hakkında daha fazla bilgi edinin.