הצגת נתוני 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. הצגת שכבת 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_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.

הצגת שכבת 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
});
 ‫
ה-constructor של KMLLayer מגדיר את כתובת ה-URL של קובץ ה-KML. הוא גם מגדיר מאפיינים לאובייקט KMLLayer שמבצעים את הפעולות הבאות:
  • המאפיין הזה מציין לשכבה לא להציג חלון מידע כשלוחצים עליה.
  • הפקודה הזו מורה למפה להתמקד בתיבת התוחמת של תוכן השכבה ולהגדיל אותה.
  • הגדרת המפה לאובייקט מפה שנוצר קודם.
במדריך ההפניה ל-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