הצגת נתוני 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, 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. הצגת שכבת KML
  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 והחלפת ישויות (מידע נוסף בהמשך). אפשר לגשת לשניהם בתור מאפיין 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 המוטמע משמש כערך של הטקסט בבלון של כל סמן מיקום.

מידע נוסף על החלפת ישויות זמין בפרק הוספת נתונים מותאמים אישית במסמכי ה-KML.

הצגת שכבת KML

הפעלת המפה

בטבלה הזו מוסבר הקוד של הקטע הזה.

קוד ותיאור 
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, מציין את המיקום שבו המפה תהיה ממוקדת ואת רמת הזום שלה, ומצרף את המפה ל-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.
  • שליפת הנתונים של התכונה שעליה לחצתם.
  • כתיבת הנתונים בסרגל הצד.

הוספת event listener

במפות Google יש פונקציה להאזנה לאירועים של משתמשים במפה ולהגיב להם, כמו קליקים או הקשות על מקשי המקלדת. הוא מוסיף listener לאירועים כאלה של click.

בטבלה הבאה מוסבר הקוד של הקטע הזה.

קוד ותיאור 
kmlLayer.addListener('click', function(event) {});
ה-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;
});
שורות הקוד האלה הופכות לפונקציה בתוך ה-constructor‏ addListener.

מעכשיו, בכל פעם שתלחצו על תכונה בפורמט KML במפה, סרגל הצד יתעדכן ויציג את תוכן חלון המידע שלה.

מידע נוסף

מידע נוסף על שימוש בקובצי KML