一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 Google Maps JavaScript API

为帮助您起步,我们将引导您在 Google Developers Console 中先完成几项任务:

  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 标准。 如需了解有关该标准的详情,请访问开放地理空间联盟网站。

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 标记中的一个变量。

下表对此部分的代码做了说明。

代码和说明
<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 的 text 元素。
$[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 都有单个 Data 元素,其 name 属性为 video
本教程的文件使用嵌入的 YouTube 视频作为每个 Placemark 提示框文本的值。

可以通过 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 Map 对象,指示它以何处为中心、在何处进行缩放,并将地图附加到 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 对象定义执行下列操作的属性:

  • 指示层在被点击时不显示信息窗口。
  • 指示地图根据层内容的边框确定中心和进行缩放。
  • 将地图设置为之前创建的 Map 对象。

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
需要帮助?请访问我们的支持页面