>> 更多 Visual Web Pack 文档

使用 AJAX 地图查看器组件

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

本教程将使用以下技术和资源

JavaServer Faces 组件/ Java EE 平台	1.2/Java EE 5* 1.1/J2EE 1.4
Travel 数据库	不是必需的
BluePrints AJAX 组件库	必需

* 该教程发布时，只有 Sun Java System Application Server 支持 Java EE 5。

本教程是针对使用 Sun Java Application Server PE 9.0 Update Release 1 和 Tomcat 5.5.17 进行定制的。如果您使用的是其他服务器，请参考发行说明和常见问题解答以了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

获取 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:8080/。

   您指定的 URL 必须与用来执行应用程序的 URL 完全匹配。对于任何部署到本地应用服务器并使用 Google 地图 API 的应用程序来说，都必须使用这个相同的密钥。如果将服务器重新配置为使用其他端口或者部署到其他服务器，则必须通过 Google 获取另外一个密钥。
4. 单击 "Generate API Key"。
5. 复制 Google 生成的地图密钥，并将其保存在文本文件中或其他方便的位置。在构建 AJAX 地图查看器应用程序时，我们需要使用该地图密钥。

创建 AJAX Web 应用程序

1. 下载并导入 AJAX 组件（如果您尚未下载）。

2. 创建一个 Visual Web 应用程序项目，并将其命名为 AjaxMapViewer。

   AjaxMapViewer 的初始页 Page1 将在可视设计器中打开。

3. 在“项目”窗口中，右键单击 "AjaxMapViewer" 的“组件库”节点，然后从弹出式菜单中选择“添加组件库”。选择 "BluePrints AJAX Components"，然后单击“添加组件库”。

   IDE 会将该组件库复制到项目中，并在组件面板中添加这些组件和支持 Bean。

4. 在组件面板中，展开 "BluePrints AJAX Components" 节点（如果它尚未展开），然后将 Map Viewer 组件拖放到 Page1 上。将该组件放置在可视设计器中的下半部分（如图 1 所示），以便为下一部分中所述的组件留出空间。

   一个地图图像将出现在 Page1 上，并且 mapViewer1 和 mapViewer1_center 组件将出现在“概要”窗口中，如下图所示。

   图 1：地图查看器组件（单击放大）

5. 在“属性”窗口中，将地图查看器的 key 属性设置为前面保存的 Google 地图密钥，如下图所示。

   图 2：地图密钥属性

6. 要查看目前为止项目的进展情况，请单击主工具栏中的绿色箭头 ，或者选择“运行”>“运行主项目”以生成并运行应用程序。

   AjaxMapViewer 项目将在 Web 浏览器中打开，如下图所示。

   图 3：地图查看器应用程序 - 第一个视图

   
   

   如果 Web 页中未显示地图，请检查以下内容：

   • 确保已连接到 Internet。
   • 如果您处于防火墙的保护下，请确保正确设置了代理主机和端口。
   • 检查应用服务器日志以查找错误。在“运行环境”窗口中，右键单击服务器节点，然后选择“查看服务器日志”。

添加输入组件

mapViewer1_center 组件的 latitude 和 longitude 属性可以确定地图的位置。在此部分，您需要在页面上添加输入组件，这些组件可以将用户输入的地址作为输入内容，并使用 AJAX 支持 Bean Geocoding Service Object 组件将该地址转换为纬度和经度坐标。将纬度和经度属性添加到请求 Bean 中，然后使用这些属性设置 mapViewer1_center 组件上的坐标。

下图显示了添加输入组件后的 AjaxMapViewer 项目。

图 4：包含输入组件的地图查看器

1. 将一个标签组件从组件面板的“基本”类别拖放到页面顶部。将该组件的 text 属性设置为 Map an Address。在“属性”窗口的“外观”类别中，将 labelLevel 属性设置为“强(1)”。
2. 将另外两个标签组件拖动到第一个标签组件的下方。将第一个标签的 text 属性设置为 "Enter the Street Address:"，并将第二个标签的 text 属性设置为 Enter the City:。
3. 将一个文本字段组件拖到 Enter the Street Address 标签组件的右侧。
4. 从组件面板的 "BluePrints AJAX Components" 类别中，拖动 "Select Value Text Field" 组件，并将其放在 Enter the City 标签组件的右侧。在“属性”窗口中，将 "Select Value Text Field" 的 required 属性设置为 True。
5. 将一个按钮组件拖动到标签组件下面。将按钮组件的 text 属性设置为 Get Map，并将 id 属性设置为 getMap。
6. 将一个消息组组件放在地图查看器下面。此组件用于显示输入错误。

1. 从组件面板的 "BluePrints AJAX Support Beans" 类别将 "Geocoding Service Object" 组件拖放到可视设计器中的任意位置。

   geoCoder1 组件将会出现在“概要”窗口中，如下图所示。

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

2. 如果您未处于防火墙的保护下，请继续执行第 3 步。如果您处于防火墙的保护下，请在 geoCoder1 组件上配置代理设置，因为它不能从 IDE 中检索代理设置。如果您未处于防火墙的保护下，请跳过此步骤。

   1. 在 geoCoder1 组件的“属性”窗口中，将 proxyHost 属性设置为您所在位置的相应代理。
   2. 将 proxyPort 属性设置为您所在位置的相应端口。

3. 在“概要”窗口中，右键单击 "RequestBean1"，然后从弹出式菜单中选择“添加”>“属性”。

   如果在菜单上看不到“添加”或者此菜单项被禁用，请按 Esc 键，然后再次右键单击 RequestBean1。
4. 在“新建属性模式”对话框中，在“名称”字段中输入 longitude，在“类型”字段中输入 double（小写），然后单击“确定”。
5. 创建第二个请求 Bean 属性。在“名称”字段中输入 latitude，在“类型”字段中输入 double（小写），然后单击“确定”。

6. 单击 "Java" 按钮以打开 Page1.jsp 的 Java 编辑器。找到 public class Page1 extends AbstractPageBean 声明，并在 Managed Component Definition 代码折叠的下方添加下面以粗体显示的代码行。

   代码样例 1：添加 displayMap 布尔值

   public class Page1 extends AbstractPageBean { // Managed Component Definition private boolean displayMap = false;

   
   

   此操作数可防止所部署的应用程序显示地图，直至用户输入了地图中的地址。

7. 返回到可视设计器，然后双击 "Get Map" 按钮。

   IDE 将在 Java 编辑器中打开 Page1，且光标位于 getMap_action() 方法中。

8. 将以下代码添加到 getMap_action() 方法中。

   代码样例 2：getMap 按钮代码

   public String getMap_action() { String address = (String)(textField1.getText() + " " + this.selectValue1.getValue()); GeoPoint points[] = geoCoder1.geoCode(address); 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()); displayMap = true; return null; }

9. 在 Java 编辑器中单击鼠标右键，然后从弹出式菜单中选择“修复导入”以解决“找不到 GeoPoint”的错误。

1. 打开“概要”窗口。右键单击 "RequestBean1"，然后从弹出式菜单中选择“添加”>“属性”。在“新建属性模式”对话框中，在“名称”字段中输入 geoPoints，在“类型”字段中输入 HashMap，然后单击“确定”。
2. 在“概要”窗口中双击 "RequestBean1" 以打开 RequestBean1.java 文件。 在 Java 编辑器中单击鼠标右键，然后从弹出式菜单中选择“修复导入”以解决“找不到 HashMap”的错误。
3. 将 HashMap 的声明 private HashMap geoPoints; 替换为以下代码：

   private HashMap geoPoints = new HashMap();

4. 返回到可视设计器，然后双击 Select Value Text Field 组件。在 Java 编辑器中，将 selectValue1_matchValue() 方法的代码替换为以下代码：

   代码样例 3：selectValue1_matchValue() 方法

   public SelectItem[] selectValue1_matchValue(FacesContext context, String value) { GeoPoint points[] = null; try { points = getGeoCoder1().geoCode(value); } catch (Exception e) { error("Geo Coding Failed. Your internet connection/proxy may be down."); } if ((points == null) || (points.length < 1)) { return null; } else { HashMap geoPoints = getRequestBean1().getGeoPoints(); geoPoints.clear(); SelectItem[] results = new SelectItem[points.length]; for (int i = 0; i < points.length; ++ i){ geoPoints.put(points[i].toString(), points[i]); results[i] = new SelectItem(points[i].toString(), points[i].toString()); } return results; } }

5. 在 Java 编辑器中单击鼠标右键，然后从弹出式菜单中选择“修复导入”以解决“找不到 HashMap 和 SelectItem”的错误。

6. 滚动至 prerender() 方法并添加以下代码：

   代码样例 4：prerender 方法

   public void prerender() { if (displayMap) { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapViewer1.setRendered(true); } else { mapViewer1.setRendered(false); } displayMap = false; }

   
   如果能够将街道地址解析为可识别的纬度和经度，此代码将呈现地图查看器组件。

7. 生成并运行该应用程序。AjaxMapViewer 将在 Web 浏览器中打开。输入一个实际地址，如 "15 Network Circle, Menlo Park, CA"。

   当在 Select Value Text Field 文本字段中开始输入文本时，请注意它是如何使用可能的城市选项来填充该组件的下拉列表。显示了选项后，您可以从此列表中选择 "Menlo Park, CA"。

8. 输入完整的地址，然后单击 "Get Map" 按钮。

   一个显示所输入位置的地图将在 Web 浏览器中打开，如下图所示。请注意，只有 Select Value Text Field 是必填项。

   如果选择城市而没有输入街道地址，则返回的地图将显示整个城市。

   图 6：地图查看器应用程序：中心位于指定坐标的地图

添加地图标记

1. 打开 Page1 的“设计”视图。
2. 将 "Map Marker" 组件从组件面板的 "BluePrints AJAX Support Beans" 类别拖放到 Page1 上的任意位置。

3. 在“概要”窗口中，选择 "page1" > "mapMarker1" 节点，如下图所示。

   图 7：“概要”窗口 - "mapMarker1" 节点

4. 在 mapMarker1 的“属性”窗口中，将 markup 属性设置为 This is the place!。

   由于为文本分配了有限空间，不间断空格 ( ) 可防止文本断为多行。
5. 在“设计”视图中，右键单击地图查看器组件，然后从弹出式菜单中选择“属性绑定”。

6. 在“属性绑定”对话框中，将 mapViewer1 的 info 属性绑定到 Page1 的 mapMarker1 属性，如下图所示。单击“应用”，然后单击“关闭”。

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

7. 单击 "Java" 按钮以打开 Java 编辑器。

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

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

   public void prerender() { if (displayMap) { mapViewer1_center.setLatitude(getRequestBean1().getLatitude()); mapViewer1_center.setLongitude(getRequestBean1().getLongitude()); mapMarker1.setLatitude(mapViewer1_center.getLatitude()); mapMarker1.setLongitude(mapViewer1_center.getLongitude()); mapViewer1.setRendered(true); } else { mapViewer1.setRendered(false); } displayMap = false; }

   
   此代码将设置 mapMarker1 组件上的坐标，以使其指向位于地图中心的位置。

9. 生成并运行该应用程序。在 Web 浏览器中打开 AjaxMapViewer 应用程序时，请输入地址，如 "15 Network Circle, Menlo Park, CA"。选择完整的地址后，单击 "Get Map" 按钮。地图将在 Web 浏览器中打开，其中包含指向该位置的地图标记，如下图所示。

   图 9：地图查看器应用程序：带有地图标记的地图

添加地图标记标志

1. 在 Page1 的 Java 编辑器中，找到 public class Page1 extends AbstractPageBean 声明。将下面以粗体显示的代码添加到此类中。

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

   public class Page1 extends AbstractPageBean { //Managed Component Definition private boolean displayMap = false; private MapMarker[] markers; public MapMarker[] getMarkers(){ return markers; }

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

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

   public void prerender() { if (displayMap) { 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; mapViewer1.setRendered(true); } else { mapViewer1.setRendered(false); } displayMap = false; }

3. 单击“设计”按钮以返回到 Page1 的“设计”视图。
4. 右键单击地图查看器组件，然后从弹出式菜单中选择“属性绑定”。

5. 在“属性绑定”对话框中，将 mapViewer1 的 markers 属性绑定到 Page1 的 markers 数组，如下图所示。单击“应用”，然后单击“关闭”。

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

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

   图 11：地图查看器应用程序：带有地图标记和标志的地图

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

试试看。在添加地图标记标志部分，您添加了 MapMarker 数组以包含地图标记和标记标志。请尝试使用该数组在地图上放置多个标记。

试试看。本教程向您介绍了如何在页面范围存储 MapMarker 数组。请尝试在会话范围内存储 MapMarker 数组，并实现“添加标记”页以便将标记添加到地图中。并确保您提供的其他地址按使用的比例系数显示在地图上。缺省的比例系数是 4。

试试看。本教程介绍了如何使用一个 Java BluePrints AJAX 地图组件来创建一个定制的地图。请尝试生成一个创建多个地图的应用程序。在 web.xml 文件中创建一个名为 "com.sun.j2ee.blueprints.ui.mapviewer.KEY" 的上下文初始化参数，并在此处存储 Google 地图服务 API 密钥值，而不是将该密钥作为您使用的每个地图组件的属性进行存储。

试试看。有关 Google Maps JavaScript API 的信息，请参见 Google Maps API 概念。要了解如何创建定制地图控件（如内置平移和缩放控件），请参见标题为 "Custom Map Controls"（定制地图控件）部分。

另请参见：

• 下载并导入 AJAX 和其他组件
• 使用 AJAX 进度栏组件