在 Google 混搭编辑器中使用 KML

Valery Hronusov,俄罗斯彼尔姆州立大学 KML 开发者

简介

Google 混搭编辑器 (GME) 是期待已久且最有用的混搭开发者工具之一。GME 可以帮助开发者根据与外部数据的关联情况,在网页中创建和修改动态组件,例如地图、表格、列表和其他元素。然后,您可以使用 iframe 将这些内容添加到网页和博客中。

本教程介绍如何将 KML 文件整合到使用 GME 创建的地图中。


我对 Google 混搭编辑器的第一印象

  • 与大多数 Google 产品一样,它界面简洁,界面简洁。
  • 它具有便捷的项目索引,以及不断增加的代码示例集合以及作者的代码。
  • 它可让您轻松存储项目的其他资源(例如图片文件)。
  • 它具有简单易用的 XML 调试程序。
  • 它包含许多易于使用的示例应用。

KML 开发者的 GME

在互联网问世之前,空间数据历来很难共享。然而,随着互联网的发展,地图应用已成为与世界轻松共享地理信息系统 (GIS) 数据的标准方式。KML 成为了 GIS 数据呈现和交换的标准,因为它不仅紧凑,易于开发,而且受到 Google 地球和 Google 地图等热门应用的支持。


一直以来,基于 JavaScript 创建和修改网页的流程对 KML 开发者来说都是一个大问题。创建混搭并调试该混搭需要执行额外的额外步骤。通过 GME,您可以非常快速地使用一些基本组件来创建基于 KML 的混搭程序。创建过程中不需要具备 HTML 或 JavaScript 方面的特殊知识。GME 示例项目提供了足够的入门知识。

在下面的示例中,我将使用指向在 Pitt Earth 美国飞行期间拍摄的照片集的 KML 文件。


下面是 Pict Earth 地图混搭程序的快照:
Pict 地球混搭快照

使用 Google Maps API 将 KML 文件集成到 GME 项目的以下步骤如下:


第 1 步: 第 2 步:

第 1 步:选择 KML 文件

选择您要添加到地图的 KML 文件。它可以是 Google 地图支持的任何功能。它必须托管在一个公开服务器上。


第 2 步:创建新的 GME 项目

创建一个新的空白 GME 项目。

空白 GME 项目如下所示:

空白 GME 项目

请为您的函数添加标题和名称。

<gm:page title="Pict Earth missions" authentication="false" onload="KMLPE()">
</gm:page>

第 3 步:创建函数以添加 KML

创建一个 JavaScript 函数,其中包含要添加到地图中的 KML 文件的路径。

<script>
  function kmlPE()
  {
    <!-- Get map -->
    var myMap = google.mashups.getObjectById('map').getMap();
    <!-- Get KML -->
    var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");
    <!--Place KML on Map -->
    myMap.addOverlay(geoXml);
    <!--Set zoom on double click -->
    myMap.enableDoubleClickZoom();
  }
</script>

第 4 步:添加地图

添加映射和参数。


<gm:map id="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>

第 5 步:测试混搭程序。

按“测试”按钮 (F4)。

这是在沙盒中测试的 Pict Earth 混搭程序的映像。

在沙盒中使用的 Pict Earth 混搭程序

现在,我们可以验证申请文本并查看第一条结果。我们可以添加标题和链接,然后重新测试。


第 6 步:发布混搭程序

设置项目名称,然后发布项目。这样会给您的混搭程序一个永久链接,您可以用其将之加入到网页中。在我的示例中,这是指向 GME 项目首页的链接。您还可以查看项目的源代码


第 7 步:将混搭功能添加到网页中

使用 iframe 将混搭功能添加到网页中。例如,如需插入示例项目,请添加以下代码:


<iframe style="WIDTH: 439px; HEIGHT: 491px" src="http://pemissions.googlemashups.com/" frameborder="0"></iframe>

以下是网站页面博客中的混搭示例。


您还可以将 Google Analytics(分析)代码添加到项目中,这样您就能跟踪与正在查看您的网页的用户相关的统计信息。以下是添加该脚本的简单脚本:


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">uacct = "youraccountnumber";urchinTracker();</script>


将您的混搭内容发布到 GME 混搭图库。 这将允许其他用户查看您的混搭程序。



如需了解详情,请参阅:

请参阅 Google 混搭编辑器入门指南,其中详细介绍了创建混搭程序的流程。此外,请查看代码列表,了解所有 gm 代码的简短说明和示例



代码:

在 GME 中使用 Pict Earth KML 的完整代码如下:

<gm:page title="Pict Earth missions" authenticate="false" onload="kmlPE()>

<!-- Map definition -->
<gm:mapid="map" height="400px" width="400px" lat="32.9393" lng="-117.206" zoom="9" maptypes="true"/>

<script>
  function kmlPE(){

    <!-- Get map -->
    var myMap = google.mashups.getObjectById('map').getMap();

    <!-- Get KML -->
    var geoXml = new GGeoXml("http://pictearthusa.com/kml/missions.kml");

    <!-- Place KML on Map -->
    myMap.addOverlay(geoXml);

    <!-- Set zoom on double click -->
    myMap.enableDoubleClickZoom();
  }
</script>
</gm:page>

后续操作

发布混搭后,您可以将其中的 KML 文件用作参数以包含在其他应用中,也可以直接作为地图加载。例如,此页面:

http://param.googlemashups.com

是一种 GME 混搭程序。您可以直接通过将 KML= 添加到网址中的参数,将 KML 文件引用到混搭程序,如下所示:

http://param.googlemashups.com/?KML=http://mapGadgets.googlepages.com/cta.KML

您还可以基于项目创建小工具。提交后,转到文件菜单,点击“提交小工具”,然后按照说明操作。这样一来,您就可以轻松将您的应用添加到 Google 个性化首页、其他网页,并与其他人分享。