您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

整合 Google Maps 到 JSF 應用：BluePrints Map Viewer 組件實戰教學

編輯：Java 相關知識

前言：一行標籤嵌入互動地圖

BluePrints JSF Map Viewer 組件（<ui:mapViewer>）封裝 Google Maps API，讓 JSF 應用以聲明式方式顯示地標、信息氣球、縮放控制。本文以官方 Store Catalog 範例為背景，示範從點擊賣場地址連結到地圖頁面的完整串聯。

架構圖解

JSF Catalog 架構圖

JSF Store UI 作為 JAX-WS 客戶端呼叫後端 EJB 3.0 服務，Map Viewer 組件獨立於業務邏輯，可移植至任何 JSF 專案（Seam、Spring、純 JPA 等）。

關鍵頁面與代碼串聯

1. Detail.jsp：地址超連結觸發導航

<h:commandLink action="#{MapBean.mapAction}" 
    value="#{item.item.address.street1}, #{item.item.address.city}, #{item.item.address.state}"/>

commandLink 送出 Action Event，action 指向 Session Scope Managed Bean MapBean。

2. faces-config.xml：Managed Bean 定義與導航規則

<managed-bean>
  <managed-bean-name>MapBean</managed-bean-name>
  <managed-bean-class>sessionpagination.client.MapBean</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<managed-bean>
  <managed-bean-name>item</managed-bean-name>
  <managed-bean-class>sessionpagination.client.ItemController</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

<navigation-rule>
  <navigation-case>
    <from-outcome>map</from-outcome>
    <to-view-id>/item/map.jsp</to-view-id>
  </navigation-case>
</navigation-rule>

3. MapBean.java：地址解析與導航邏輯

public class MapBean {
    private MapMarker mapMarker = new MapMarker();
    private MapPoint mapPoint = new MapPoint();
    private String location = "";

    public MapMarker[] getLocations() { return new MapMarker[]{mapMarker}; }

    public String mapAction() {
        // 從 Session 獲取 ItemController，取得當前商品地址
        ItemController ic = (ItemController) FacesContext.getCurrentInstance()
                .getExternalContext().getSessionMap().get("item");
        Address addr = ic.getItem().getAddress();
        location = addr.getStreet1() + ", " + addr.getCity() + ", " 
                   + addr.getState() + ", " + addr.getZip();
        return findLocation(); // 解析經緯度並返回 "map" 導航
    }

    public String findLocation() {
        GeoCoder geoCoder = new GeoCoder(); // 內部呼叫 Yahoo 地圖服務
        GeoPoint[] points = geoCoder.geoCode(location);
        mapMarker.setLatitude(points[0].getLatitude());
        mapMarker.setLongitude(points[0].getLongitude());
        mapMarker.setMarkup(points[0].toString());
        mapPoint.setLatitude(points[0].getLatitude());
        mapPoint.setLongitude(points[0].getLongitude());
        return "map"; // 對應 faces-config.xml 導航 case
    }
}

4. map.jsp：聲明式渲染 Google Map

<%@taglib prefix="ui" uri="https://java.sun.com/blueprints/ui/14" %>
<ui:mapViewer id="mapViewerx" 
    center="#{MapBean.mapPoint}" 
    info="#{MapBean.mapMarker}" 
    markers="#{MapBean.locations}" 
    zoomLevel="4" 
    style="height: 500px; width: 700px"/>

屬性對應：

center：MapPoint 決定地圖中心經緯度
info：MapMarker 提供信息氣球文字
markers：MapMarker[] 標記多個地標（本例僅第一個）
zoomLevel：初始縮放級別

運行步驟（NetBeans + GlassFish）

安裝 GlassFish V2、NetBeans 5.5.1+，IDE 中註冊 GlassFish。
下載範例專案 sessionpagination（含 EJB/Web 模組）與 sessionpagination-wsclient（JSF 客戶端）。
NetBeans 開啟專案，解決引用問題（右鍵專案 → Resolve Reference Problems）。
啟動資料庫（專案腳本需建表）。
Run Project 部署 sessionpagination（後端服務）。
Run Project 部署 sessionpagination-wsclient（前端 JSF），瀏覽器開啟 https://localhost:8080/sessionpagination-wsclient/。