מוצג 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. מסמכי התיעוד של 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 לאתר.

יצירת שכבת ה-KML

טבלה זו מסבירה את הקוד שיוצר שכבת 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
});

בונה השכבות של KML מגדיר את כתובת ה-URL של קובץ ה-KML. הוא גם מגדיר מאפיינים לאובייקט KMLLayer כדי לבצע את הפעולות הבאות:
  • מורה לשכבה לא להציג חלון מידע כשלוחצים עליה.
  • מורה למפה להתמרכז ולהגדיל את התצוגה של התיבה התוחמת של תוכן השכבה.
  • מגדיר את המפה לאובייקט המפה שנוצר קודם לכן.
המדריך של Maps JavaScript API מפרט את כל האפשרויות הזמינות לשכבה זו.
טוענים את קובץ ה-HTML כדי להציג את התוכן של קובץ ה-KML כשכבה על גבי המפה הבסיסית. עם זאת, לחיצה על תכונה כלשהי לא תגרום עדיין לפעולה כלשהי.

הצגת נתונים בסרגל הצד

בסעיף זה מוסבר מהן ההגדרות שמציגות את התוכן של חלון המידע בסרגל הצד כשלוחצים על עצם במפה. זה נעשה על ידי:

  • האזנה לאירוע קליק על אחת מהתכונות של KMLLayer.
  • מתבצע אחזור של הנתונים של התכונה שעליה לחץ המשתמש.
  • כתיבת הנתונים האלה בסרגל הצד.

הוספת האזנה לאירוע

למפות 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.