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

אם אתם רק מתחילים ללמוד ואין לכם קובץ 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.

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

יצירת KMLLayer

בטבלה הזו מוסבר הקוד שיוצר שכבת KML.

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