แสดงข้อมูล KML

ภาพรวม

บทแนะนำนี้แสดงวิธีแสดงข้อมูลของไฟล์ KML ใน Google Maps และแถบด้านข้าง ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ไฟล์ 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, 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

เริ่มต้นใช้งาน

ขั้นตอนในการสร้างแผนที่และแถบด้านข้างสำหรับบทแนะนำนี้มีดังนี้

  1. การตั้งค่าไฟล์ KML
  2. การแสดง KMLlayer
  3. การแสดงข้อมูลในแถบด้านข้าง

การตั้งค่าไฟล์ KML สำหรับการนำเข้า

ไฟล์ KML ควรเป็นไปตามมาตรฐาน KML ดูรายละเอียดเกี่ยวกับ มาตรฐานนี้ได้ที่เว็บไซต์ของOpen Geospatial Consortium เอกสารประกอบ KML ของ Google ยังอธิบายถึง ภาษา และมีทั้งเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์อ้างอิงและเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์เชิงแนวคิด

หากคุณเพิ่งเริ่มต้นและไม่มีไฟล์ KML คุณสามารถทำสิ่งต่อไปนี้ได้

  • ใช้ไฟล์ KML ต่อไปนี้สำหรับบทแนะนำนี้

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

  • ค้นหาไฟล์ KML บนเว็บ คุณใช้filetypeโอเปอเรเตอร์การค้นหาของ Google ได้

    แทนที่คำค้นหาด้วย velodromes หรือละเว้นคำ ทั้งหมดเพื่อค้นหาไฟล์ KML ทั้งหมด

หากคุณสร้างไฟล์ของคุณเอง โค้ดในตัวอย่างนี้จะถือว่า

  • คุณโฮสต์ไฟล์แบบสาธารณะบนอินเทอร์เน็ต นี่เป็นข้อกำหนดสำหรับ แอปพลิเคชันทั้งหมดที่โหลด KML ลงใน KMLLayer เพื่อให้เซิร์ฟเวอร์ของ Google ค้นหาและดึงเนื้อหามาแสดงบนแผนที่ได้
  • ไฟล์ไม่ได้อยู่ในหน้าที่ป้องกันด้วยรหัสผ่าน
  • ฟีเจอร์ของคุณมีเนื้อหาในหน้าต่างข้อมูล คุณสามารถใส่เนื้อหานี้ในองค์ประกอบ description หรือใส่โดยใช้องค์ประกอบ ExtendedData และการแทนที่เอนทิตี (อ่านข้อมูลเพิ่มเติมด้านล่าง) ทั้ง 2 อย่างนี้เข้าถึงได้ ในฐานะพร็อพเพอร์ตี้ infoWindowHtml ของฟีเจอร์

องค์ประกอบ ExtendedData

ไฟล์ KML ในบทแนะนำนี้มีข้อมูลฟีเจอร์ในองค์ประกอบ ExtendedData หากต้องการนำข้อมูลนี้ไปใส่ในคำอธิบายของฟีเจอร์ ให้ใช้การแทนที่เอนทิตี ซึ่งเป็นตัวแปร ในแท็ก BalloonStyle

ตารางด้านล่างจะอธิบายโค้ดสำหรับส่วนนี้

รหัสและคำอธิบาย 
<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 มีองค์ประกอบ Style เดียวที่ใช้กับหมุดทุกรายการ
องค์ประกอบ Style นี้กำหนดค่า #[video] ให้กับ องค์ประกอบข้อความของ BalloonStyle
รูปแบบ $[x] จะบอกตัวแยกวิเคราะห์ KML ให้ค้นหาองค์ประกอบ Data ที่ชื่อ video และใช้เป็นข้อความบอลลูน 
<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
Placemark แต่ละรายการมีองค์ประกอบ ExtendedData ซึ่งมีองค์ประกอบ Data โปรดสังเกตว่า Placemark แต่ละรายการมีองค์ประกอบ Data เพียงรายการเดียว ที่มีแอตทริบิวต์ชื่อเป็น video
ไฟล์สำหรับบทแนะนำนี้ใช้วิดีโอ YouTube ที่ฝังเป็นค่า ของข้อความบอลลูนของแต่ละ Placemark

ดูข้อมูลเพิ่มเติมเกี่ยวกับการแทนที่เอนทิตีได้ในบทการเพิ่มข้อมูลที่กำหนดเองของเอกสารประกอบ 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 Maps โปรดอ่านบทแนะนำการเพิ่ม Google Maps ลงในเว็บไซต์

การสร้าง 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
  • ดึงข้อมูลของฟีเจอร์ที่คลิก
  • เขียนข้อมูลนั้นลงในแถบด้านข้าง

การเพิ่ม Listener เหตุการณ์

Google Maps มีฟังก์ชันสำหรับฟังและตอบสนองต่อเหตุการณ์ของผู้ใช้ในแผนที่ เช่น การคลิกหรือการกดแป้นพิมพ์ โดยจะเพิ่ม Listener สำหรับเหตุการณ์ click ดังกล่าว

ตารางด้านล่างจะอธิบายโค้ดสำหรับส่วนนี้

รหัสและคำอธิบาย 
kmlLayer.addListener('click', function(event) {});
Listener เหตุการณ์ kmlLayer.addListener จะมุ่งเน้นที่ สิ่งต่อไปนี้
  • ประเภทของเหตุการณ์ที่จะฟัง ในบทแนะนำนี้คือเหตุการณ์ click
  • ฟังก์ชันที่จะเรียกใช้เมื่อเกิดเหตุการณ์
ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์ได้ใน คู่มือสำหรับนักพัฒนาซอฟต์แวร์

เขียนข้อมูลฟีเจอร์ KML ลงในแถบด้านข้าง

ในขั้นตอนนี้ของบทแนะนำ คุณได้บันทึกเหตุการณ์คลิกในฟีเจอร์ของเลเยอร์แล้ว ตอนนี้คุณสามารถตั้งค่าแอปพลิเคชันให้เขียนข้อมูลของฟีเจอร์และ เนื้อหาของหน้าต่างข้อมูลไปยังแถบด้านข้างได้แล้ว

ตารางด้านล่างจะอธิบายโค้ดสำหรับส่วนนี้

รหัสและคำอธิบาย 
var content = event.featureData.infoWindowHtml;
เขียนเนื้อหาของหน้าต่างข้อมูลลงในตัวแปร 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
ระบุ div ที่จะเขียน และแทนที่ HTML ใน div ด้วยเนื้อหาของฟีเจอร์ 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});
บรรทัดโค้ดเหล่านี้จะกลายเป็นฟังก์ชันภายในตัวสร้าง addListener

ตอนนี้ทุกครั้งที่คุณคลิกฟีเจอร์ KML บนแผนที่ แถบด้านข้างจะอัปเดตเพื่อแสดงเนื้อหาหน้าต่างข้อมูล

ข้อมูลเพิ่มเติม

อ่านเพิ่มเติมเกี่ยวกับการใช้ไฟล์ KML