目录   -  获取 Google 地图 API 密钥 -  创建 AJAX Web 应用程序 -  添加地图坐标输入页 -  添加地图标记 -  添加地图标记标志 -  使用 AJAX 地图查看器组件执行更多操作

获取 Google 地图 API 密钥

1. 在您的 Web 浏览器中，请转至 http://www.google.com/apis/maps/。
   
   Google 地图密钥注册页将在 Web 浏览器中打开。
   
   
2. 单击 "Sign up for a Google Maps API key"。
   
   Google 地图密钥许可证协议页将在 Web 浏览器中打开。
   
   
3. 查看该协议并接受它，然后输入您的 Web 站点的 URL。
   
   要找到您的 Web 站点的 URL，请部署一个应用程序并查看服务器的名称和端口号。例如 http://localhost:28080/。
   
   您指定的 URL 必须与用来执行应用程序的 URL 完全匹配。对于任何部署到本地应用服务器并使用 Google 地图 API 的应用程序，都必须使用相同的密钥。如果将服务器重新配置为使用某个端口或者部署到其他服务器，则必须从 Google 获取其他的密钥。
   
   
4. 单击 "Generate API Key"。
   
   Google 将生成地图密钥。
   
   
5. 复制地图密钥，并将其保存在文本文件或其他方便的位置。在生成 AJAX 地图查看器应用程序时，将使用该地图密钥。

创建 AJAX Web 应用程序

1. 下载并导入 AJAX 组件（如果您尚未执行此操作）。
   
   
2. 创建一个 Web 应用程序项目，并将其命名为 AjaxMapViewer。
   
   AjaxMapViewer 的初始页 Page1 将在可视设计器中打开。
   
   
3. 在组件面板中，展开 "BluePrints AJAX Components" 节点（如果它尚未展开），然后将 "Map Viewer" 组件拖放到 Page1 上。
   
   地图图像将出现在 Page1 上，并且组件 mapViewer1 和 mapViewer1_center 将出现在“概要”窗口中，与下图类似。
   
   

   图 1：地图查看器组件

    
   
4. 在“属性”窗口中，找到地图查看器的 key 属性，并输入以前保存的 Google 地图密钥，如下图所示。
   
   

   图 2：地图密钥属性

    
   
5. 生成并运行应用程序，以查看到目前为止所具有的内容。AjaxMapViewer 项目将在 Web 浏览器中打开。
   
   

   图 3：地图查看器应用程序拍图 1

    
   

添加地图坐标输入页

1. 在“项目”窗口中，右键单击 "AjaxMapViewer" >“Web 页”，然后从弹出式菜单中选择“新建”>“页”。
   
   
2. 在“新建页”对话框中，键入文件名 GetCoordinates，然后单击“完成”。
   
   IDE 将在可视设计器中打开 GetCoordinates 页。下图显示了您将设计的页。
    
   

   图 4：GetCoordinates 页面设计

    
   
3. 将一个“标签”组件从组件面板的“基本”类别拖放到该页的左上角。将“标签”组件的 text 属性设置为 Enter an address:
   
   
4. 将一个“文本字段”组件拖放到“标签”组件的右侧。在“属性”窗口中，将“文本字段”组件的 required 属性设置为 True。
   
   
5. 将一个“按钮”组件拖动到页面上，并将其放在“文本字段”组件的下方。将“按钮”组件的 text 属性设置为 Get Map，并将 id 属性设置为 getMap。
   
   
6. 将一个“消息组”组件拖动到页面上，并将其放在 "Get Map" 按钮的下方。

1. 在可视设计器中的任意位置单击鼠标右键，然后从弹出式菜单中选择“页面导航”。
   
   “页面导航”窗口将在 IDE 中打开。
   
   
2. 单击 GetCoordinates.jsp 图标，并从 getMap 按钮拖动一条连线到 Page1.jsp。
   
   
3. 在“项目”窗口中，右键单击 "AjaxMapViewer" >“Web 页”> "GetCoordinates" 节点，然后从弹出式菜单中选择“设置为起始页”。
   
   在 "GetCoordinates" 节点的旁边将出现一个绿色方向键，如下图所示。
   
   

   图 5：GetCoordinates 起始页标记

    
   

1. 通过单击 GetCoordinates 页的标签返回到该页。
   
   
2. 将 "Geocoding Service Object" 组件从组件面板的 "BluePrints AJAX Support Beans" 类别拖放到 GetCoordinates 页中的任意位置。
   
   geoCoder1 组件将出现在“概要”窗口中，如下图所示。
   
   

   图 6：“概要”窗口中的 geoCoder1

    
   
3. 如果您处于防火墙的保护下，请在 geoCoder1 组件上配置代理设置，因为它不能从 IDE 中检索代理设置。如果您未处于防火墙的保护下，请跳过此步骤。
   
   
   1. 在 geoCoder1 组件的“属性”窗口中，将 proxyHost 属性设置为您所在位置的相应代理。
   2. 将 proxyPort 属性设置为您所在位置的相应端口。
      
      

1. 在“概要”窗口中，右键单击 "RequestBean1"，然后从弹出式菜单中选择“添加”>“属性”。
   
   将打开“新建属性模式”对话框。
   
   
2. 在“名称”字段中输入 longitude，在“类型”字段中输入 double（小写），然后单击“确定”。
   
   
3. 创建第二个请求 Bean 属性。在“名称”字段中输入 latitude，在“类型”字段中输入 double（小写），然后单击“确定”。
   
   
4. 在可视设计器中双击 "Get Map" 按钮。IDE 将在 Java 编辑器中打开 GetCoordinates 页，且光标位于 getMap_action() 方法中。
   
   
5. 将下面以粗体显示的代码添加到 getMap_action() 方法中。
   
   

   代码样例 1：GetMap 按钮代码

   public String getMap_action() { GeoPoint points[] = geoCoder1.geoCode((String)textField1.getText()); if (points.length < 1) { error("Sorry, cannot find that location; please be more specific."); return null; } getRequestBean1().setLatitude(points[0].getLatitude()); getRequestBean1().setLongitude(points[0].getLongitude()); return "case1"; }

    
   
6. 在 Java 编辑器中单击鼠标右键，然后从弹出式菜单中选择“修复导入”以解决“找不到 GeoPoint”错误。
   
   
7. 单击 "Page1" 标签，然后单击 "Java" 按钮。
   
   
8. 在 Page1 的 Java 编辑器中，向下滚动到 prerender() 方法，并添加下面以粗体显示的代码。
   
   

   代码样例 2：prerender 方法

   public void prerender() { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); }

    
   
9. 生成并运行该应用程序。AjaxMapViewer 将在 Web 浏览器中打开。输入实际地址，如 "15 Network Circle, Menlo Park, CA"，然后单击 "Get Map" 按钮。一个显示所输入位置的地图将在 Web 浏览器中打开，与下图类似。
    
   

   图 7：地图查看器应用程序拍图 2

    
   

添加地图标记

1. 打开 Page1 的设计视图。
   
   
2. 将 "Map Marker" 组件从组件面板的 "BluePrints AJAX Support Beans" 类别拖放到 Page1 上的任意位置。
   
   
3. 在 mapMarker1 的“属性”窗口中，将 markup 属性设置为 This is the place!。
   
   
4. 在“概要”窗口中，右键单击 mapViewer1 组件，然后从弹出式菜单中选择“属性绑定”。
   
   
5. 在“属性绑定”对话框中，将 mapViewer1 的 info 属性绑定到 Page1 的 mapMarker1 属性，如下图所示。单击“应用”，然后单击“关闭”。
   
   

   图 8：将 mapViewer1 的 info 属性绑定到 mapMarker1

    
   
6. 双击 Page1 上的任意位置以打开 Java 编辑器。
   
   
7. 滚动到 prerender() 方法，并添加下面以粗体显示的两行代码。
   
   

   代码样例 3：具有地图标记支持的 prerender() 方法

   public void prerender() { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapMarker1.setLatitude(mapViewer1_center.getLatitude()); mapMarker1.setLongitude(mapViewer1_center.getLongitude()); }

    
   此代码会设置 mapMarker1 组件上的坐标以便它可以指向位于地图中心的位置。
   
   
8. 生成并运行该应用程序。当 AjaxMapViewer 应用程序在 Web 浏览器中打开时，请输入地址，如 "15 Network Circle, Menlo Park, CA"，然后单击 "Get Map" 按钮。地图将在 Web 浏览器中打开，其中包含指向该位置的地图标记，与下图类似。
    
   

   图 9：地图查看器应用程序拍图 3

    
   

添加地图标记标志

1. 在 Page1 的 Java 编辑器中，找到 public class Page1 extends AbstractPageBean 声明。并在 Creator-Managed Component Definition 代码折叠的下方添加下面以粗体显示的代码。
   
   

   代码样例 4：将 MapMarker 数组添加到 Page1

   public class Page1 extends AbstractPageBean { Creator-managed Component Definition private MapMarker[] markers; public MapMarker[] getMarkers(){ return markers; }

    
   
2. 滚动到 prerender() 方法，并添加下面以粗体显示的两行代码。
   
   

   代码样例 5：具有地图标记标志代码的 prerender() 方法

   public void prerender() { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapMarker1.setLatitude(mapViewer1_center.getLatitude()); mapMarker1.setLongitude(mapViewer1_center.getLongitude()); markers = new MapMarker[1]; markers[0] = mapMarker1; }

    
   
3. 单击“设计”按钮以返回到 Page1 设计视图。
   
   
4. 在“概要”窗口中，右键单击 "mapViewer1" 组件，然后从弹出式菜单中选择“属性绑定”。
   
   
5. 在“属性绑定”对话框中，将 mapViewer1 的 markers 属性绑定到 Page1 的 markers 数组，如下图所示。单击“应用”，然后单击“关闭”。
    
   

   图 10：将 Markers 属性绑定到 Markers 数组

    
   
6. 生成并运行该应用程序。输入一个地址，如 "15 Network Circle, Menlo Park, CA"，然后单击 "Get Map" 按钮。地图将在 Web 浏览器中打开，其中包含指向该位置的地图标记和标志，与下图类似。
    
   

   图 11：地图查看器应用程序拍图 4

    
   

使用 Ajax 地图查看器组件执行更多操作

• 使用 AJAX 文本完成组件
• 使用 AJAX 进度栏组件
• AJAX 和 Sun Java Studio Creator 2
• 在 Sun Java Studio Creator 2 中安装并使用 BluePrints 样例 AJAX 组件