總覽
此教學課程說明如何使用在 Google 地圖與側欄顯示 KML 檔案資訊。 如需在地圖使用 KML 檔案的詳細資訊，請參閱 KML 圖層指南。
嘗試按一下下面地圖上的標記，以查看側欄資料。
下一節顯示建立地圖與側欄所需的完整程式碼。
var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
/**
* Initializes the map and calls the function that loads the KML layer.
*/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: 'terrain'
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* @param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, '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';
/**
* Initializes the map and calls the function that loads the KML layer.
*/
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: 'terrain'
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* @param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, '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>
開始使用
這些是此教學課程建立地圖與側欄的各階段：
設定 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 標記中的變數。
下表說明此節的程式碼。
| 程式碼與描述 | |
|---|---|
|
KML 檔案有一個套用到所有地點標記的 Style 元素。
此 Style 元素會將 #[video] 的值指派給 BalloonStyle 的文字元素。$[x] 格式會告知 KML 剖析器尋找名為 video 的 Data 元素，然後當成氣球文字使用。 |
|
每個 Placemark 都包含 ExtendedData
元素，其中包含 Data元素。
請注意，每個 Placemark 都有一個名稱屬性為 video 的 Data 元素。
此教學課程的檔案使用嵌入式 YouTube 影片作為每個地點標記的氣球文字值。 |
您可以在 KML 文件的新增自訂資料一章深入了解實體取代。
顯示 KMLLayer
初始化地圖
此表格說明此節的程式碼。
| 程式碼與描述 | |
|---|---|
|
如果要在地圖上顯示 KML，您需要先建立地圖。 此程式碼會建立新的 Google 地圖物件，告知中心點與縮放層級，並將地圖附加到 div。要深入了解有關如何建立 Google 地圖的基本概念，請參閱將 Google 地圖新增到網站教學課程。 |
建立 KMLLayer
此表格說明用於建立 KMLLayer 的程式碼。
| 程式碼與描述 | |
|---|---|
|
建立新的 KMLLayer 物件以顯示您的 KML。 |
|
KMLLayer 建構函式設定 KML 檔案的網址。 它也會為執行下列動作的 KMLLayer 物件定義屬性：
Google Maps JavaScript API 參考指南 列出此圖層可用的所有選項。 |
在側欄中顯示資料
此節說明當您按一下地圖上的特徵時，會在側欄中顯示資訊視窗內容的設定。 方法是：
- 接聽任何 KMLLayer 特徵的點擊事件。
- 取得所點擊特徵的資料。
- 將該資料寫入到側欄。
新增事件接聽程式
Google 地圖提供在地圖上接聽和回應使用者事件（如點擊和按下鍵盤按鍵）的函式。
它會新增此類 click 事件的接聽程式。
下表說明此節的程式碼。
| 程式碼與描述 | |
|---|---|
|
google.maps.event.addListener 事件接聽程式著重在下列各項：
您可以在開發人員指南中深入了解事件。 |
將 KML 特徵資料寫入到側欄
到了教學課程的此階段，您已經在圖層的特徵上擷取點擊事件。 您現在可以設定應用程式將特徵的資料與資訊視窗內容寫入到側欄。
下表說明此節的程式碼。
| 程式碼與描述 | |
|---|---|
|
將資訊視窗內容寫入到變數。 |
|
識別要寫入的 div，然後用特徵的內容取代其中的 HTML。
|
|
這幾行程式碼會成為函式，放入 addListener
建構函式。
|
現在，您每次按一下地圖上的 KML 特徵時，側欄都會更新以顯示其資訊視窗內容。
更多資訊
深入了解如何使用 KML 檔案。
需要協助嗎？請前往我們的