使用 Google Mapplets 自定义 Google Maps 结果页面

第 2 页，共 12 页 文档选项 讨论 样例代码 对本教程的评价 帮助我们改进这些内容

在 PHP 中编写 mapplet

首先，要创建 Google Mapplet 本身，使用 PHP 编写它，然后，将它添加到 Google 帐户中，因此，可以对它进行开发，并在浏览器中查看行为。Google Mapplet 是一个专门的 Google gadget 规范，所以，第一步是生成 Google gadget。在本节中，使用 PHP 编写 gadget，将 gadget XML 和它的 CDATA 部分分离到不同文件中，将 CDATA 部分分为 HTML 文件和 JavaScript 文件，分离为不同的语言使其更容易编辑。

在公共服务器上创建 weather-mapplet.php 文件

首先，创建清单 1 所示的 weather-mapplet.php 文件。

					
<? echo('<?xml version="1.0" encoding="UTF-8"?>'); ?>
<Module>
  <ModulePrefs title="Local Weather Mapplet" 
               description="Displays local weather on the map."
               author="Jake Miles"
               author_email="jake_cnnew1@jakemiles.com"
               height="150">
    <Require feature="sharedmap"/>
  </ModulePrefs>
  <Content type="html"><![CDATA[

   <? include ('weather-mapplet-content.php'); ?>

]]></Content>

</Module>

清单 1 创建一个 mapplet gadget 规范（一个模块），并指定标题、描述、作者、作者的邮箱地址和 mapplet 的高度。mapplet 规范需要 <Require feature="sharedmap"> 标记。它需要页面中有一个共享的地图（Google Map）。

回页首

将 HTML 重构到另外一个 PHP 文件中

清单 1 中的下一个元素 Content 指定 CDATA 元素内的 mapplet 的内容。不要对 CDATA 元素的 mapplet 进行编码，在大多数的编辑器中，这是很难实现的，可以将 HTML 的内容重构到 weather-mapplet-content.php 中，如清单 2 所示。

					
Ladies and jellyspoons, your local weather...

<div>
  Units: 
  <input id="units-english" type="radio" name="weather-units" checked> English
  <input id="units-metric" type="radio" name="weather-units"> Metric
</div>

<div>
  Result behavior: <br/>
  <input id="results-simple" type="radio" name="result-type" checked> 
Client-side  <br/>
  <input id="results-server-xslt" type="radio" name="result-type"> 
Server-side XSLT
</div>

<div id="message">

</div>

<script>
   <? include ('weather-mapplet-content.js'); ?>
   runMapplet();
</script>

清单 2 指定将 HTML 加载到 Google Maps 结果页面的左侧（参见图 1）。它包括一对单选按钮，可以选择天气信息的英制计量或公制计量，另外一组单选按钮可以选择实现路径，因为在本教程中，要实现两种解决方案。当调试 JavaScript 代码时，清单 2 中的消息 div 可作为一个输出控制台，而且，可以使用它在 Yahoo Weather 提要中显示天气摘要。

回页首

添加 JavaScript

JavaScript 本身被重构到 weather-mapplet-content.js 文件中，这样更容易编辑，而且可以分离不同类型的代码。weather-mapplet-content.php 包含 JavaScript 文件，所以当呈现时，JavaScript 文件显示为内嵌的内容（在一个可调用的 URL 中集合 Google Gadget 规范），但是您仍然可以编辑它自己的文件。

HTML 片段加载后，调用 Javascript 函数 runMapplet()（在后面的 开发 Javascript 中定义）启动 mapplet 功能。RunMapplet() 函数放在 weather-mapplet-content.js 中。整个 JavaScript 文件是比较长的，可以在本教程附带的 源代码 包中找到它。清单 3 显示了 JavaScript 文件的开始部分，现在您拥有了所有 PHP 包含链（在本教程的后面部分，您将逐行浏览这个文件）。

					
var map = new GMap2();
var mapCenter;

function runMapplet () {  .......

现在，可以将 mapplet 的 URL 添加到 Google Maps 页面中，在继续对功能进行编码之前，可以查看它最初的形式。您将构建功能并在此过程中在页面中进行调试。

weather-mapplet-content.js 的顶端声明两个公共变量，map 和 mapCenter，将 map 设置为 Gmap2 的一个新实例。Gmap2 表示页面的 Google Map。mapCenter 存储后面使用的地图的中心坐标。

回页首

	第 2 页，共 12 页