KML verilerini görüntüleme

Genel Bakış

Bu eğitimde, KML dosyasındaki bilgilerin Google Harita'da ve kenar çubuğunda nasıl görüntüleneceği açıklanmaktadır. Haritalarda KML dosyalarını kullanma hakkında daha fazla bilgi için KML Katmanları Rehberi'ni 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 gereken 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 kodla JSFiddle'da denemeler yapabilirsiniz.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, us>er-sc<alable=no"
    >meta <chars>et="utf-8"
   < title>KML C<lick >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;
       bo<rder-l>eft<: non>e;
<    >   }
<    /style
 >< /he>ad
  <body
    div id=><&quo>t;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.getElementBy<Id('>;capt<ure');
          testimonial.innerHTML = content;
        });
      }
    &/script
    scrip>t asy<nc
    >src<=&quo>t<;http>s://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYcallback=initMap"
    /script
  /body
/html

Başlarken

Bu eğitimde harita ve kenar çubuğu oluşturma aşamaları ş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 standartla ilgili ayrıntılar için Open Geospatial Consortium web sitesine bakın. Google'ın KML belgelerinde de dil açıklanmakta olup hem referans hem de kavramsal geliştirici belgeleri sunulmaktadır.

Yeni öğreniyorsanız ve KML dosyanız yoksa:

  • Bu eğitimde aşağıdaki KML dosyasını kullanın:

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

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

    velodromes yerine herhangi bir arama terimi yazın veya tüm KML dosyalarını bulmak için terimi tamamen atlayın.

Kendi dosyanızı oluşturuyorsanız bu örnekteki kodun şu varsayımlara dayandığını unutmayın:

  • Dosyayı internette herkese açık olarak barındırıyorsunuz. Bu, Google'ın sunucularının içeriği bulup haritada görüntüleyebilmesi için KML'yi KMLLayer'ya yükleyen tüm uygulamalar için zorunludur.
  • Dosya, şifre korumalı bir sayfada değil.
  • Özelliklerinizde bilgi penceresi içeriği var. Bu içeriği bir description öğesinde bulundurabilir veya ExtendedData öğesi ve varlık değiştirme kullanarak ekleyebilirsiniz (daha fazla bilgi için aşağıyı okuyun). Her ikisine de özelliğin infoWindowHtml özelliği 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_s>tyl<e"
 > Icon<Styl>e
    I<con<>/span>
      hrefhttps://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.<png
 >     </href>
  <  /Icon
  >/Ic<onStyle
  Ba>lloon<Styl>e
    te<xt$[v>ide<o]/text
  /Ba>l<loonSt>yle
/Style
KML dosyasında tüm yer işaretlerine uygulanan tek bir Style öğesi var.
Bu Style öğesi, BalloonStyle öğesinin metin öğesine #[video] değerini atar.
$[x] biçimi, KML ayrıştırıcısına Data öğesini video adıyla aramasını ve balon metni olarak kullanmasını söyler.		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="v>ideo"<;
   ><     val<ue![CDATA[iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" f><ramebor><de><r=>&q><uot;0&>quot;
 <     >    a<llowfullscree>n/ifr<amebr>br]]/va<lue
      />Data
    /ExtendedData
    Point
     < coordinates>-122.<091497>7<709329,37.>42390182131783,0/coordinates
    /Point
/Placemark
Her Placemark, Data öğesini içeren bir ExtendedData öğesi içerir. Her Placemark öğesinin, video adlı bir ad özelliğine sahip tek bir Data öğesi olduğunu unutmayın.
Bu eğitimdeki dosya, her yer işaretinin balon metninin değeri olarak yerleştirilmiş YouTube videosunu kullanır.

KML belgelerindeki Özel Veri Ekleme bölümünden öğ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'
  });
}
Bir haritada KML göstermek için önce haritayı oluşturmanız gerekir.
Bu kod yeni bir Google Haritası nesnesi oluşturur, bu nesneye nerede ortalanacağını ve ne kadar yakınlaştırılacağını söyler ve haritayı div öğesine ekler.
Google Harita oluşturmanın temelleri hakkında daha fazla bilgi edinmek için Web sitenize Google Harita ekleme eğitici yazısını 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 oluşturucusu, KML dosyanızın URL'sini ayarlar. Ayrıca, KMLLayer nesnesi için aşağıdaki işlemleri yapan özellikleri de tanımlar:
  • Katmana, tıklandığında bilgi penceresi göstermemesini söyler.
  • Haritaya, katmanın içeriklerinin sınırlayıcı kutusunu ortalaması ve bu kutuya yakınlaştırması talimatını verir.
  • Haritayı daha önce oluşturulan Map nesnesine ayarlar.
Maps JavaScript API referans kılavuzunda bu katman için kullanılabilen tüm seçenekler listelenir.
KML dosyası içeriğini temel haritanın üzerinde bir katman olarak göstermek için HTML dosyanızı yükleyin. Ancak herhangi bir özelliği tıkladığınızda henüz herhangi bir işlem yapılmaz.

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

Bu bölümde, haritada bir özelliği tıkladığınızda bilgi penceresi içeriğini kenar çubuğunda gösteren ayarlar açıklanmaktadır. Bunu mümkün kılan özelliklerine bakalım:

  • KMLLayer'ın özelliklerinden herhangi birinde tıklama etkinliği dinleme.
  • 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 basma) dinleyip yanıtlamaya yönelik bir işlev sunar. Bu tür click etkinlikleri için 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şleyicisi 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 bir 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 yakalamış olursunuz. 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 oluşturucusundaki işlev haline gelir.

Artık haritada bir KML özelliğini her tıkladığınızda kenar çubuğu, bilgi penceresi içeriğini gösterecek şekilde güncelleniyor.

Daha fazla bilgi

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