Ajax支持的Google地图Mashup教程(6)

作者: , 　出处:Dev2Dev,　责任编辑: 叶江,　

2007-06-13 14:59

　　本文中将使用工具轻松构建终极的Hello World mashup：Google地图mashup……

 

　　查看下面的 HTML 片断来了解这一结构：

<table>
<tr>
<td valign="top">
    <div id="google_map_div"
           style="width: 500px; height: 300px">
    </div>
</td>
<td valign="top">
<p id="getLocations_div" align="center">
        <>
        <form id="getLocationsForm">
        <input value="Get the Locations"
           type="submit"
          onclick="javascript:getLocationsAndMap();return false"
        />
        </form>
</p>
<p>
  <div id="locations_div">
  <>
  </div>
</p>
</td>
</tr>
</table>

　　请注意，当用户按下按钮时，将触发一个onclick 事件。该事件连接到了前述getLocationsAndMap() 函数，该函数将调用针对REST 服务的XMLHttpRequest。您已经看到，getLocationsAndMapCallback() 函数之后会将服务响应从JSON 文本转换为注入到DOM 的HTML。

　　现在，您需要将地址组合到Google 地图中。首先，getLocationsAndMapCallback() 中的JavaScript 代码会编写HTML ，因此每个地址都会有一个调用JavaScript 函数的锚定标记。函数showAddress()和代码会传递所点击的位置地址。以上代码中getLocationsAndMapCallback()函数的 TODO注释替换为这行代码：

var anchor = ‘<a href="irrelevant"
   onclick="javascript:showAddress(\‘‘+
      response.locations.location[i].address+‘\‘);‘+
      ‘ return false">‘;

　　这会为每个地址创建一个锚定标记，单击地址时就会触发showAddress() 函数。

　　下一步，showAddress() 函数会连接到Google 地图 API，由它真正在地图中显示传递过来的地址。这是通过Google 提供的样板代码来完成的。请注意以下代码中的GMap2 和 geocoder 对象，它们都是作为Google地图API的一部分提供的。该代码将检索地图，然后更新HTML 文档的google_map_div div 标记。

function showAddress(address) { 
        var map = new GMap2(
           document.getElementById("google_map_div"));
        var geocoder = new GClientGeocoder();
        geocoder.getLatLng(address,   
                function(point) {     
                  if (!point) {       
                    alert(address + " not found");     
                  } else {       
                    map.setCenter(point, 13);       
                    var marker = new GMarker(point);       
                    map.addOverlay(marker);       
                    marker.openInfoWindowHtml(address);
                  }   
            } 
    );
}

　　无论您相信与否，这样就完成了Ajax支持的Google 地图 mashup!在本教程中我还没有展示完整的文件，我展示的是重要部分。查看下载一节，获取完整代码。