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

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

开发 JavaScript

JavaScript 是 mapplet 的中心内容。在本节中，开始介绍 JavaScript ，这样就有了一个完整的 PHP 包含链 — 包括的文件链构成 URL 的结果。一个是 mapplet 规范，其中包含 mapplet 的 HTML，后者包含的是 JavaScript 文件。一旦这三个部分准备好之后，就可以开始应用程序功能的开发。

添加 runMapplet() 函数

Mapplet 的骨架显示在 Google Maps 结果页面后，可以继续开发 JavaScript 以利用它的功能。将 runMapplet() 函数添加到 weather-mapplet-content.js 中，如清单 4 所示。

					
function runMapplet () {
  GEvent.addListener(map, "moveend", function() {          
    map.getCenterAsync (onGetCenter);
  });
}

这是在 mapplet 的 HTML 内容的 <script> 标记中调用的函数。意味着当页面加载时函数就被调用。RunMapplet() 将 mapplet 设置为响应页面地图中的位置变化事件。

RunMapplet() 不直接对地图进行操作。它为 moveend 地图事件添加一个监听程序，提供一个函数对象，当地图改变位置后（例如，当用户用鼠标拖动地图），该函数对象被调用。产生的事件会驱动其他的 mapplet 行为。在 Google Maps API 中调用的许多函数必须用 Mapplets API 中相应的异步函数代替。

回页首

调用 getCenter() 函数

该回调函数本身就可得到地图的中心坐标，用 GLatLng 对象表示一个纬度/经度对。回调函数与在简单的 Google Maps API 组件中相比看起来有所不同。用 mapplets API 中对 getCenterAsync() 的调用代替 Google Maps API 中对 getCenter() 的调用。调用 getCenterAsync() 需要 onGetCenter 回调函数。onGetCenter() 函数通过地图的中心坐标调用，这与 getCenter() 的调用相反，后者直接返回坐标。

因此，runMapplet() 为地图的移动设置侦听程序，当地图发生移动后，监听程序要求地图提供其中心纬度/经度对，提供 onGetCenter 作为回调函数。因此，当地图的中心位置改变时，使用新的地图中心调用函数 onGetCenter（参阅清单 5）。

					
function onGetCenter (center) {
  mapCenter = center;
  var reverseGeocoderUrl = createReverseGeocoderUrl (center);
  document.getElementById("message").innerHTML = 'Looking up zipcode from ' + 
reverseGeocoderUrl;
  _IG_FetchXmlContent (reverseGeocoderUrl, onReverseGeocoderResult);
}

function createReverseGeocoderUrl(gLatLng) {
    return 'http://ws.geonames.org/findNearbyPostalCodes?lat=' + gLatLng.lat() + 
'&lng=' + gLatLng.lng();
}

使用地图的中心 GLatLng 对象调用 onGetCenter()，该对象表示地图的纬度/经度坐标。将 GLatLng 对象存储在全局变量 mapCenter 中，这样做主要是为了避免在后面的 JavaScript 中使用地图中心时重复异步调用。而且，将 mapplet 中的消息 div 中的文本设置为状态信息，这表示可以很容易地在 JavaScript 中访问 mapplet 的 HTML 元素，即使 mapplet 在 Google Maps 页面内运行。

回页首

将地图中心转换为邮编

尽管 Google Map 可以提供它的中心坐标，但是，Yahoo weather RSS 提要需要的是邮编，而 Google map 不提供中心坐标对应的邮编。因此，为实现两者之间的映射，使用一个免费的反向地理编码服务（参阅 先决条件 获得链接），接收纬度和经度，并返回描述几个附近的邮编的 XML。

设置全局变量 mapCenter 之后，onGetCenter() 使用地图的中心对象 GLatLng 调用 createReverseGeocoderUrl()，生成反向地理编码 URL。

要调用这个 URL，使用 Google Maps API 函数 _IG_FetchXmlContent，这将加载 URL 的内容，将其作为 XML 进行解析，并生成一个 DOM 对象。这个调用是异步的，所以可以和 getCenterAsync() 一样，提供一个回调函数。在本例中，回调函数为 onReverseGeocoderResult，如清单 6 所示。

					
function onReverseGeocoderResult (data) {
    var zipcodes = data.getElementsByTagName("code");
    if (zipcodes.length == 0) {
      document.getElementById("message").innerHTML = 
'No zipcode information available for the current map location.';
    } else {
      var firstCode = zipcodes[0];
      var postalCodeDom = firstCode.getElementsByTagName('postalcode')[0];
      var zipcode = postalCodeDom.textContent;
      onZipcodeObtained (zipcode);
    }
}

用一个 DOM 对象调用 onReverseGeocoderResult，该对象表示反向地理编码服务调用的 XML 结果。可以通过在浏览器中调用反向地理编码器查看结果。例如，反向地理编码器调用

http://ws.geonames.org/findNearbyPostalCodes?
lat=40.746135271984336&lng=-73.97892951965332

会生成清单 7 所示的 XML（此处简略列出）。

注意：上面的 URL 以多行显示只是为了满足格式目的。当把它复制到浏览器中时，需要将其变为一串字符。

					
<geonames>
 <code>
   <postalcode>10016</postalcode>
   <name>NewYork</name>
   <countryCode>US</countryCode>
   <lat>40.746135271984336</lat>
   <lng>-73.97892951965332</lng>
   <adminCode1>NY</adminCode1>
   <adminName1>NewYork</adminName1>
   <adminCode2>061</adminCode2>
   <adminName2>NewYork</adminName2>
   <adminCode3/>
   <adminName3/>
   <distance>0.0</distance>
 </code>
 <code>
   <postalcode>10158</postalcode>
   <name>NewYork</name>
   <countryCode>US</countryCode>
   <lat>40.749435</lat>
   <lng>-73.9758</lng>

 ...

</geonames>

XML 包含给定的纬度/经度对附近的邮编的结构化地址信息。

将结果信息作为一个 DOM 对象提供给 onReverseGeocoderResult 函数，该函数调用 getTagsByElementName()，获取所有名为 code 的标记。如果服务没有为坐标对返回邮编，那么 onReverseGeocoderResult() 将在 mapplet 的消息 div 中报告。另外，本例中只想要一个邮编，而不是附近的所有邮编。因此，onReverseGeocoderResult() 使用文档中的第一个 <code> 元素查找它的 postalcode 元素，并获得 textContent 值，就得到用字符串表示的邮编。然后，使用邮编调用 onZipcodeObtained()（参阅清单 8）。

					
function onZipcodeObtained(zipcode) {
  var unitsEnglishRadio = document.getElementById('units-english');
  var units = unitsEnglishRadio.checked ? 'f' : 'c';
  var serverXsltRadio = document.getElementById('results-server-xslt');
  if (serverXsltRadio.checked) {
    fetchServerXsltResults(zipcode, units);
  } else {
    fetchYahooRss (zipcode, units);
  }
}

用地图中心对应的邮编调用 onZipcodeObtained()。然后，查看哪个计量单位单选按钮被选中，然后查看哪个功能路径被选中：客户端还是服务器端 XSLT。如果服务器端路径被选中，调用 fetchServerXsltResults()，否则，调用 fetchYahooRss()，并传递邮编和计量单位（华氏温度或摄氏温度）。fetchServerXsltResult() 使用服务器端路径，调用 KML 覆盖层的 PHP 脚本，fetchYahooRss() 在 JavaScript 中直接调用 Yahoo RSS 提要，并显示它的摘要。

回页首

	第 4 页，共 12 页