نمایش داده های KML

نمای کلی

این آموزش به شما نشان می‌دهد که چگونه اطلاعات یک فایل KML را در نقشه گوگل و نوار کناری نمایش دهید. برای اطلاعات بیشتر در مورد استفاده از فایل‌های 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 مراجعه کنید. مستندات KML گوگل نیز این زبان را شرح می‌دهد و هم یک مرجع و هم یک مستندات توسعه‌دهنده مفهومی ارائه می‌دهد.

اگر تازه شروع به یادگیری کرده‌اید و فایل KML ندارید، می‌توانید:

  • برای این آموزش از فایل KML زیر استفاده کنید:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • یک فایل KML را در وب پیدا کنید. می‌توانید از اپراتور جستجوی filetype گوگل استفاده کنید.

    برای یافتن تمام فایل‌های KML، هر عبارت جستجویی را برای velodromes جایگزین کنید، یا این عبارت را به طور کلی حذف کنید.

اگر فایل خودتان را ایجاد می‌کنید، کد موجود در این مثال فرض می‌کند که:

  • شما فایل را به صورت عمومی در اینترنت میزبانی کرده‌اید. این یک الزام برای همه برنامه‌هایی است که KML را در KMLLayer بارگذاری می‌کنند تا سرورهای گوگل بتوانند محتوا را پیدا و بازیابی کنند و آن را روی نقشه نمایش دهند.
  • فایل در صفحه‌ای که با رمز عبور محافظت می‌شود، قرار ندارد.
  • ویژگی‌های شما دارای محتوای پنجره اطلاعات هستند. می‌توانید این محتوا را در یک عنصر description قرار دهید، یا آن را با استفاده از یک عنصر ExtendedData و جایگزینی موجودیت (برای اطلاعات بیشتر در ادامه بخوانید) وارد کنید. هر دو به عنوان ویژگی infoWindowHtml ویژگی قابل دسترسی هستند.

عناصر ExtendedData

فایل KML در این آموزش شامل اطلاعات ویژگی در یک عنصر ExtendedData است. برای وارد کردن این اطلاعات در توضیحات ویژگی، از entity replacement استفاده کنید که اساساً یک متغیر در تگ 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 با ویژگی name به video است.
فایل این آموزش از ویدیوی یوتیوب جاسازی‌شده به عنوان مقدار هر متن بالون Placemark استفاده می‌کند.

می‌توانید اطلاعات بیشتری در مورد جایگزینی موجودیت را در فصل «افزودن داده‌های سفارشی» از مستندات 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 روی نقشه، ابتدا باید نقشه را ایجاد کنید.
این کد یک شیء جدید نقشه گوگل ایجاد می‌کند، به آن می‌گوید که کجا را در مرکز قرار دهد و بزرگنمایی کند، و نقشه را به div متصل می‌کند.
برای کسب اطلاعات بیشتر در مورد اصول اولیه ایجاد نقشه گوگل، آموزش افزودن نقشه گوگل به وب سایت خود را مطالعه کنید.

ایجاد لایه KML

این جدول کدی را که یک 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 تعریف می‌کند که موارد زیر را انجام می‌دهند:
  • به لایه می‌گوید که هنگام کلیک، پنجره اطلاعات را نمایش ندهد.
  • به نقشه می‌گوید که در مرکز کادر محاطی محتویات لایه قرار گیرد و بزرگنمایی کند.
  • نقشه را روی شیء نقشه‌ای که قبلاً ایجاد شده است، تنظیم می‌کند.
راهنمای مرجع Maps JavaScript API تمام گزینه‌های موجود برای این لایه را فهرست می‌کند.
فایل HTML خود را بارگذاری کنید تا محتوای فایل KML به عنوان یک لایه در بالای نقشه پایه نمایش داده شود. با این حال، کلیک روی هر عارضه هنوز هیچ عملی را منجر نمی‌شود.

نمایش داده‌ها در نوار کناری

این بخش تنظیماتی را توضیح می‌دهد که هنگام کلیک روی یک عارضه روی نقشه، محتوای پنجره اطلاعات را در نوار کناری نمایش می‌دهد. این کار با انجام موارد زیر انجام می‌شود:

  • منتظر رویداد کلیک روی هر یک از ویژگی‌های KMLLayer باشید.
  • دریافت داده‌های ویژگی کلیک‌شده.
  • نوشتن آن داده‌ها در نوار کناری.

افزودن یک شنونده رویداد

نقشه‌های گوگل تابعی را برای گوش دادن و پاسخ دادن به رویدادهای کاربر روی نقشه، مانند کلیک‌ها یا فشردن کلیدهای صفحه کلید، فراهم می‌کند. این تابع یک شنونده برای چنین رویدادهای click اضافه می‌کند.

جدول زیر کدهای مربوط به این بخش را توضیح می‌دهد.

کد و توضیحات 
kmlLayer.addListener('click', function(event) {});

شنونده رویداد 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;
});

این خطوط کد به تابعی درون سازنده‌ی addListener تبدیل می‌شوند.

حالا هر بار که روی یک عارضه KML روی نقشه کلیک می‌کنید، نوار کناری به‌روزرسانی می‌شود تا محتوای پنجره اطلاعات آن را نمایش دهد.

اطلاعات بیشتر

درباره استفاده از فایل‌های KML بیشتر بخوانید.