简介
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 地图混搭程序的快照:
使用 Google Maps API 将 KML 文件集成到 GME 项目的以下步骤如下:
第 1 步: 第 2 步:
第 1 步:选择 KML 文件
选择您要添加到地图的 KML 文件。它可以是 Google 地图支持的任何功能。它必须托管在一个公开服务器上。
第 2 步:创建新的 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 混搭程序的映像。
现在,我们可以验证申请文本并查看第一条结果。我们可以添加标题和链接,然后重新测试。
第 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>
第 8 步:将图片放入 GME 图库
将您的混搭内容发布到 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 个性化首页、其他网页,并与其他人分享。