概览
本教程介绍如何在 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 标准。 如需了解有关该标准的详情，请访问开放地理空间联盟网站。
Google 的 KML 文档也介绍了这种语言，并同时提供了参考文档和概念开发者文档。
如果您刚开始学习，还没有 KML 文件，则可：
-
使用本教程专用的以下 KML 文件：
https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml -
在网络上找到一个 KML 文件。 可以使用 Google 的
filetype搜索运算符。
可以用任何搜索字词替换
velodromes，也可完全省略搜索字词，查找全部 KML 文件。
如果要自行创建 KML 文件，此示例中的代码做以下假定：
-
您已在互联网上公开托管该文件。 这是对所有将 KML 加载到
KMLLayer中的应用的要求，这样一来，Google 的服务器才能查找并检索内容，以将其显示在地图上。 -
该文件不在受密码保护的页面上。
- 您的特征包含信息窗口内容。 可使用
description元素容纳该内容，也可利用ExtendedData元素和实体替换（详情见下文）加入该内容。
两者都可以特征 infoWindowHtml 属性的形式进行获取。
ExtendedData 元素
本教程中的 KML 文件使用 ExtendedData 元素来容纳特征信息。
要将这些信息加入特征的说明，可以使用实体替换，它本质上是 BalloonStyle 标记中的一个变量。
下表对此部分的代码做了说明。
| 代码和说明 | |
|---|---|
|
KML 文件有一个应用于所有标注的 Style 元素。
这个 Style 元素会将值 #[video] 分配给 BalloonStyle 的 text 元素。$[x] 格式指示 KML 解析器寻找一个名为 video 的 Data 元素，并使用它作为提示框文本。 |
|
每个 Placemark 都包含一个 ExtendedData 元素，
其中包含 Data 元素。
请注意，每个 Placemark 都有单个 Data 元素，其 name 属性为 video。本教程的文件使用嵌入的 YouTube 视频作为每个 Placemark 提示框文本的值。 |
可以通过 KML 文档的添加自定义数据一章了解有关实体替换的更多信息。
显示 KMLLayer
初始化地图
下表对此部分的代码做了说明。
| 代码和说明 | |
|---|---|
|
要在地图上显示 KML，需要先创建地图。 这段代码的作用是，新建一个 Google Map 对象，指示它以何处为中心、在何处进行缩放，并将地图附加到 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 文件的内容
需要帮助？请访问我们的