סקירה כללית
במדריך הזה מוסבר איך להציג מידע על קובץ 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>
תחילת העבודה
אלה השלבים ליצירת המפה והסרגל הצד עבור מדריך זה:
הגדרת קובץ 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
.
הטבלה שבהמשך מסבירה את הקוד של קטע זה.
קוד ותיאור | |
---|---|
|
קובץ ה-KML מכיל רכיב Style אחד שחל על כל הסמנים. הרכיב Style הזה מקצה ערך של #[video] לרכיב הטקסט של BalloonStyle .הפורמט $[x] מורה למנתח של KML לחפש
אלמנט Data בשם video ולהשתמש בו כטקסט בבלון. |
|
כל Placemark מכיל רכיב ExtendedData שמכיל את הרכיב Data .
שימו לב שלכל Placemark יש רכיב Data אחד עם מאפיין השם video .בקובץ של המדריך הזה נעשה שימוש בסרטון YouTube המוטמע בתור הערך של טקסט הבלון בכל סמן. |
ניתן לקרוא מידע נוסף על החלפת ישויות בפרק הוספת נתונים מותאמים אישית במסמכי התיעוד בפורמט KML.
הצגת ה-KMLLayer
המפה מופעלת
הטבלה הבאה מסבירה את הקוד של קטע זה.
קוד ותיאור | |
---|---|
|
כדי להציג KML במפה, צריך קודם ליצור את המפה. הקוד הזה יוצר אובייקט חדש של מפות Google, מורה לו היכן למרכז ולשנות את מרחק התצוגה, ומצרף את המפה אל div .מידע נוסף על העקרונות הבסיסיים של יצירת מפות Google זמין במדריך הוספה של מפת Google לאתר. |
יצירת שכבת ה-KML
טבלה זו מסבירה את הקוד שיוצר שכבת KML.
קוד ותיאור | |
---|---|
|
יצירת אובייקט KMLLayer חדש להצגת ה-KML. |
|
בונה השכבות של KML מגדיר את כתובת ה-URL של קובץ ה-KML. הוא גם מגדיר מאפיינים לאובייקט KMLLayer כדי לבצע את הפעולות הבאות:
|
הצגת נתונים בסרגל הצד
בסעיף זה מוסבר מהן ההגדרות שמציגות את התוכן של חלון המידע בסרגל הצד כשלוחצים על עצם במפה. זה נעשה על ידי:
- האזנה לאירוע קליק על אחת מהתכונות של KMLLayer.
- מתבצע אחזור של הנתונים של התכונה שעליה לחץ המשתמש.
- כתיבת הנתונים האלה בסרגל הצד.
הוספת האזנה לאירוע
למפות Google יש פונקציה שמאפשרת להאזין לאירועי משתמש במפה ולהגיב להם, כמו לחיצות או הקשות במקלדת. הוא מוסיף פונקציית ה-listener לאירועים מסוג click
כאלה.
הטבלה שבהמשך מסבירה את הקוד של קטע זה.
קוד ותיאור | |
---|---|
|
ה-event listener של kmlLayer.addListener מתמקד בפעולות הבאות:
|
כתיבת נתוני תכונות KML בסרגל הצד
בשלב הזה של המדריך, תיעדתם אירועי קליקים במאפיינים של השכבה. עכשיו אפשר להגדיר לאפליקציה לכתוב את הנתונים של התכונה ואת התוכן של חלון המידע בסרגל הצד.
הטבלה שבהמשך מסבירה את הקוד של קטע זה.
קוד ותיאור | |
---|---|
|
כותבים את התוכן של חלון המידע למשתנה. |
|
מזהה את div שצריך לכתוב בו ומחליף את ה-HTML שבו בתוכן התכונה.
|
|
שורות הקוד האלה הופכות לפונקציה ב-constructor של addListener .
|
בכל פעם שאתה לוחץ על תכונת KML במפה, סרגל הצד מתעדכן ומציג את התוכן של חלון המידע.
מידע נוסף
מידע נוסף על השימוש בקובצי KML.