กําลังแสดง 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. การแสดง 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_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 Maps ใหม่ บอกให้รู้ว่าต้องจัดกึ่งกลางและซูมที่ใด และแนบแผนที่ไว้กับ 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 แผนที่มีฟังก์ชันในการฟังและตอบสนองต่อเหตุการณ์ของผู้ใช้บนแผนที่ เช่น การคลิกหรือการกดแป้นบนแป้นพิมพ์ และเพิ่ม 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 ในนั้นด้วยเนื้อหาของฟีเจอร์ 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

โค้ดบรรทัดเหล่านี้จะกลายเป็นฟังก์ชันภายในเครื่องมือสร้าง addListener

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

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

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