您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

顯示 KML

總覽

此教學課程說明如何使用在 Google 地圖與側欄顯示 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 defer
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 defer
    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 檔案。 您可以使用 Google 的 filetype 搜尋運算子。 以任何搜尋字詞替代 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 剖析器尋找名為 videoData 元素,然後當成氣球文字使用。
<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 都有一個名稱屬性為 videoData 元素。
此教學課程的檔案使用嵌入式 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

此表格說明用於建立 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 建構函式設定 KML 檔案的網址。 它也會為執行下列動作的 KMLLayer 物件定義屬性:

  • 告知圖層不要在使用者點擊時顯示資訊視窗。
  • 告知地圖要置中放置和縮放到圖層內容的邊界方塊。
  • 將地圖設定為先前建立的地圖物件。

Google Maps JavaScript API 參考指南 列出此圖層可用的所有選項。

載入 HTML 檔案以將 KML 檔案內容顯示為基本地圖上方的圖層。 然而,按一下任何特徵將不會產生任何動作。

在側欄中顯示資料

此節說明當您按一下地圖上的特徵時,會在側欄中顯示資訊視窗內容的設定。 方法是:

  • 接聽任何 KMLLayer 特徵的點擊事件。
  • 取得所點擊特徵的資料。
  • 將該資料寫入到側欄。

新增事件接聽程式

Google 地圖提供在地圖上接聽和回應使用者事件(如點擊和按下鍵盤按鍵)的函式。 它會新增此類 click 事件的接聽程式。

下表說明此節的程式碼。

程式碼與描述
google.maps.event.addListener(kmlLayer, 'click', function(event) {});

google.maps.event.addListener 事件接聽程式著重在下列各項:

  • 所要接聽的物件。 在此教學課程中是 kmlLayer 物件。
  • 要接聽的事件類型。 在此教學課程中是 click事件。
  • 發生事件時要呼叫的函式。

您可以在開發人員指南中深入了解事件。

將 KML 特徵資料寫入到側欄

到了教學課程的此階段,您已經在圖層的特徵上擷取點擊事件。 您現在可以設定應用程式將特徵的資料與資訊視窗內容寫入到側欄。

下表說明此節的程式碼。

程式碼與描述
var content = event.featureData.infoWindowHtml;

將資訊視窗內容寫入到變數。
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

識別要寫入的 div,然後用特徵的內容取代其中的 HTML。

google.maps.event.addListener(kmlLayer, 'click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

這幾行程式碼會成為函式,放入 addListener 建構函式。

現在,您每次按一下地圖上的 KML 特徵時,側欄都會更新以顯示其資訊視窗內容。

更多資訊

深入了解如何使用 KML 檔案

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁