java - 在 Primefaces 中使用谷歌地图库自动完成地址

Question

我正在使用 Primefaces 3.4 、Apache Tomcat 7 和 Java EE。我读了GoogleMaps API但我无法使用此功能。

我有一个 PrimeFaces 输入框，当我在上面写一个地址时，我想建议 GoogleMaps 库提供的其他地址。

将 JavaScript 代码放入我的 XHTML 时没有任何反应。我也有 GoogleMaps 的图书馆。

这是我的 XHTML:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    function initia(domicilioDesde, domicilioHasta) {

        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var oldDirections = [];
        var currentDirections = null;
        var cordoba = " ,Cordoba, Argentina";
        var direccion = domicilioDesde; /* '#{busquedaplayaMB.direccionDesde}'; */
        var start = direccion.concat(cordoba);
        var fin = domicilioHasta; /*'#{busquedaplayaMB.playaselected.domicilio}';*/
        var end = fin.concat(cordoba);
        var request = {
            origin : start,
            destination : end,
            travelMode : google.maps.DirectionsTravelMode.DRIVING
        }
        var myOptions = {
            zoom : 13,
            center : new google.maps.LatLng(#{busquedaplayaMB.latitudCentro},#{busquedaplayaMB.longitudCentro}),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"),
                myOptions);

        directionsDisplay = new google.maps.DirectionsRenderer({
            'map' : map,
            'preserveViewport' : true,
            'draggable' : true
        });
        directionsDisplay.setPanel(document
                .getElementById("directions_panel"));

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        dlg2.show();
    }

    function undo() {
        currentDirections = null;
        directionsDisplay.setDirections(oldDirections.pop());
        if (!oldDirections.length) {
            setUndoDisabled(true);
        }
    }

    function setUndoDisabled(value) {
        document.getElementById("undo").disabled = value;
    }
</script>

<h:form id="form">
    <p:growl id="messages" showSummary="false" autoUpdate="true"
        globalOnly="true" />

    <div align="left" style="margin: 10px 0 10px 0;">
        <p:panel>
            <h:panelGrid columns="1" width="100%" cellspacing="5"
                cellpadding="5">
                <h:panelGrid columns="2" width="80%">
                    <p:column style="vertical-align:text-center;">
                        <h:panelGrid columns="2">
                            <p:column>
                                <p:watermark for="direccionBusqueda"
                                    value="Dirección de búsqueda" />
                                <p:inputText id="direccionBusqueda"
                                    value="#{busquedaplayaMB.direccionBusqueda}" required="true"
                                    requiredMessage="Campo dirección de búsqueda obligatorio"
                                    style="width:250px;">
                                    <p:ajax event="blur" update="direccionBusquedaMsg" />
                                </p:inputText>
                            </p:column>
                            <p:column>
                                <p:message id="direccionBusquedaMsg" display="icon"
                                    for="direccionBusqueda" />
                            </p:column>
                        </h:panelGrid>
                    </p:column>
                    <p:column>
                        <div align="center">
                            <h:outputLabel value="N° de cuadras: " />
                            <h:outputLabel id="nroCuadras"
                                value="#{busquedaplayaMB.distancia}" />
                            <h:inputHidden id="distancia"
                                value="#{busquedaplayaMB.distancia}" />
                            <p:slider for="distancia" minValue="1" maxValue="50"
                                style="width:100px;" update="nroCuadras" display="nroCuadras" />
                        </div>
                    </p:column>
                </h:panelGrid>

                <h:panelGrid columns="5" cellspacing="5" cellpadding="5"
                    width="100%">
                    <p:column style="vertical-align:text-center;">
                        <p:selectOneMenu value="#{busquedaplayaMB.categoriaParameter}"
                            effect="fade" style="width:160px;height:25px;line-height:17px;">
                            <f:selectItem itemLabel="Todas las categorías"
                                itemValue="#{null}" />
                            <f:selectItems
                                value="#{categoriaVehiculoMB.categoriaVehiculoList}"
                                var="categoria" itemValue="#{categoria}"
                                itemLabel="#{categoria.nombre}" />
                            <f:converter converterId="categoriaVehiculoConverter" />
                        </p:selectOneMenu>
                    </p:column>

                    <p:column style="vertical-align:text-center;">
                        <p:selectOneMenu value="#{busquedaplayaMB.tipoEstadiaParameter}"
                            effect="fade" style="width:160px;height:25px;line-height:17px;">
                            <f:selectItem itemLabel="Todas los tipos estadías"
                                itemValue="#{null}" />
                            <f:selectItems value="#{tipoEstadiaMB.tipoEstadiaList}"
                                var="tipoEstadia" itemValue="#{tipoEstadia}"
                                itemLabel="#{tipoEstadia.nombre}" />
                            <f:converter converterId="tipoEstadiaConverter" />
                        </p:selectOneMenu>
                    </p:column>

                    <p:column style="vertical-align:text-center;">
                        <div align="right">
                            <h:panelGrid columns="2">
                                <p:selectBooleanCheckbox id="check"
                                    value="#{busquedaplayaMB.checkPromociones}" />
                                <p:outputLabel for="check" value="Sólo con promociones" />
                            </h:panelGrid>
                        </div>
                    </p:column>
                    <p:column>
                        <div align="right">
                            <p:commandButton id="btnBuscarAvanzado" update="playas,mapa"
                                value="Buscar" action="#{busquedaplayaMB.busquedaAvanzada}"
                                ajax="false" icon="ui-icon-search" style="width:85px;" />
                        </div>
                    </p:column>
                </h:panelGrid>
            </h:panelGrid>
        </p:panel>
    </div>



    <div>
        <p:panel>
            <f:view contentType="text/html">
                <!--                <h1>Playas encontradas:</h1> -->
                <script src="http://maps.google.com/maps/api/js?sensor=false"
                    type="text/javascript"></script>

                <p:gmap center="#{busquedaplayaMB.coordenadas}" zoom="14"
                    type="ROADMAP" model="#{busquedaplayaMB.advancedModel}"
                    style="width:99,5%; height:350px;">

                    <p:ajax event="overlaySelect"
                        listener="#{busquedaplayaMB.onMarkerSelect}" />

                    <p:gmapInfoWindow>

                        <ui:fragment
                            rendered="#{busquedaplayaMB.marker.data.playa == null}">
                            <div align="center">
                                <ui:fragment rendered="#{busquedaplayaMB.usuario == null}">
                                    <h:outputText style="font-weight:bold;" value="¡Usted está aquí!" />
                                </ui:fragment>

                                <ui:fragment rendered="#{busquedaplayaMB.usuario != null}">
                                    <h:panelGrid column="1" style="text-align:center;"
                                        cellspacing="0px" cellpadding="0px">

                                        <p:column>
                                            <h:graphicImage library="fotos_perfil_usuarios"
                                                name="sinfoto.jpg"
                                                styleClass="bordes-foto-perfil-comentario"
                                                rendered="#{busquedaplayaMB.usuario.fotoUsuario == null}" />
                                            <h:graphicImage library="fotos_perfil_usuarios"
                                                name="#{busquedaplayaMB.usuario.nombreUser}.jpg"
                                                styleClass="bordes-foto-perfil-comentario"
                                                rendered="#{busquedaplayaMB.usuario.fotoUsuario != null}" />
                                        </p:column>
                                        <p:column>
                                            <h:outputText style="font-weight:bold;"
                                                value="#{busquedaplayaMB.usuario.nombre} #{busquedaplayaMB.usuario.apellido}" />
                                        </p:column>
                                        <p:column>
                                            <h:link id="linkUsuario" tittle="Ir a mi perfil"
                                                value="Ir a mi perfil" outcome="/cliente/perfilcliente" />
                                        </p:column>

                                    </h:panelGrid>
                                </ui:fragment>

                            </div>
                        </ui:fragment>

                        <ui:fragment
                            rendered="#{busquedaplayaMB.marker.data.playa != null}">
                            <div align="center">
                                <h:panelGrid column="1" style="text-align:center;"
                                    cellspacing="0px" cellpadding="0px">
                                    <p:column>
                                        <h:graphicImage library="fotos_perfil_playas"
                                            name="#{busquedaplayaMB.marker.data.id}_#{busquedaplayaMB.marker.data.nombreFoto}"
                                            styleClass="bordes-foto-perfil-comentario"
                                            rendered="#{busquedaplayaMB.marker.data.nombreFoto != null}" />
                                        <h:graphicImage library="fotos_perfil_playas"
                                            name="sinfoto.jpg"
                                            styleClass="bordes-foto-perfil-comentario"
                                            rendered="#{busquedaplayaMB.marker.data.nombreFoto == null}" />
                                    </p:column>
                                    <h:outputText style="font-weight:bold;"
                                        value="#{busquedaplayaMB.marker.data.playa.nombreComercial}" />

                                    <h:outputText
                                        value="#{busquedaplayaMB.marker.data.playa.domicilio} - #{busquedaplayaMB.marker.data.playa.barrio.nombre}" />

                                    <h:link id="link" tittle="Ir a playa" value="Ver información"
                                        outcome="/viewperfilplaya.html?id=#{busquedaplayaMB.marker.data.playa.id}" />

                                </h:panelGrid>
                            </div>
                        </ui:fragment>
                    </p:gmapInfoWindow>
                </p:gmap>
            </f:view>
        </p:panel>
    </div>

    <div style="margin: 5px;">
        <p:dataTable id="playas" var="playa" paginator="true"
            paginatorPosition="bottom" rows="5"
            emptyMessage="¡No existen playas!"
            value="#{busquedaplayaMB.playaResultadoBusqueda}">

            <p:column headerText="Nombre Comercial" styleClass="column-font">
                <p:cellEditor>
                    <f:facet name="output">
                        <h:outputText value="#{playa.nombreComercial}" />
                    </f:facet>
                    <f:facet name="input">
                        <p:inputText value="#{playa.nombreComercial}"
                            styleClass="input-font" />
                    </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Barrio" styleClass="column-font">
                <h:outputText value="#{playa.barrio.nombre}" />
            </p:column>

            <p:column headerText="Domicilio" styleClass="column-font">
                <h:outputText value="#{playa.domicilio}" />
            </p:column>

            <p:column headerText="Perfil" style="text-align:center; width:50px;">
                <h:link id="verPerfil" title="Ver perfil"
                    outcome="/viewperfilplaya.html?id=#{playa.id}">
                    <h:graphicImage library="images/icons" name="go.png" />
                </h:link>
            </p:column>
            <p:column headerText="Ruta" style="text-align:center; width:50px;">
                <p:commandLink id="view2" oncomplete="dlgOrigen.show();"
                    title="¿Cómo llegar a esta playa?" update=":dlgO" process="@this">
                    <f:setPropertyActionListener value="#{playa}"
                        target="#{busquedaplayaMB.playaselected}" />
                    <h:graphicImage library="images/icons" name="search-map.png"
                        style="height:40px; width:40px" />
                </p:commandLink>
            </p:column>
        </p:dataTable>
    </div>
    <!--    </h:form> -->

    <p:dialog widgetVar="dlg2" width="800" height="400" modal="true"
        id="dialog" draggable="false" closable="true">

        <!--        <h:form id="frmComoLlegar"> -->
        <f:facet name="header">
            <h:outputText value="¿Cómo llegar a la playa?" />
        </f:facet>
        <div id="map_canvas" style="float: left; width: 65%; height: 100%"></div>
        <div style="float: right; width: 35%; height: 100%; overflow: auto">
            <div id="directions_panel" style="width: 100%"></div>
        </div>
        <f:facet name="footer" style="text-align=right;">
            <p:commandButton id="undo" value="Volver"
                style="float:right; width:274px; height: 42px" onclick="undo();"></p:commandButton>
        </f:facet>
    </p:dialog>
</h:form>

<p:dialog header="Dirección de origen" id="dlgO" widgetVar="dlgOrigen"
    resizable="false" closable="true">
    <h:form id="frmComoLlegar">

        <h:panelGrid columns="2" cellspacing="10" cellpadding="10">
            <h:outputLabel for="dirOrigen" value="Dirección de origen: " />
            <p:inputText id="dirOrigen" required="true"
                value="#{busquedaplayaMB.direccionDesde}"
                onkeyup="if (event.keyCode == 13) { document.getElementById(':frmComoLlegar:siguiente').click(); return false; }" />
            <p:column />
            <p:column>
                <div align="right">
                    <p:commandButton id="siguiente" value="Siguiente" ajax="true"
                        onclick="initia(jQuery('#frmComoLlegar\\:dirOrigen').val(), '#{busquedaplayaMB.playaselected}');"
                        update=":dialog" process="@this"
                        action="#{busquedaplayaMB.tomarDomicilioDesde}" />
                </div>
            </p:column>
        </h:panelGrid>
    </h:form>
</p:dialog>

Answer 1

我已经使用 GMap3 实现了这个功能jQuery 插件(也与 JSF + Primefaces 结合使用)。看这个例子:https://github.com/jbdemonte/gmap3/blob/master/examples/autocomplete/autocomplete.html