居中gmap

时间:2011-10-31 13:48:58

标签: jsf datatable primefaces-gmap

我正在开发一种解决方案,用于在通过移动应用程序提交数据时映射人员在现场的位置。 从移动应用程序提交的所有数据都将发送到远程数据库,我使用primefaces数据表对象以表格形式显示所有数据。

在选择行时,会选择一个感兴趣的记录,并随附三角测量协调员提交给该特定记录。

我的挑战在于,一旦我从一个记录移动到另一个记录,就会改变地图的焦点,它迫使我刷新整个xhtml页面,以便选择位于地图上的新坐标以及标记附接。

以下是我遇到的问题的代码:

<ui:define name="main_content">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                <h:form id="hsc">    
                    <p:ajax event="rowSelect" update=":ewreg:display" oncomplete="helpDialog.show()" /> 
                    <p:dataTable id="tbl" value="#{merchadiseBeanList.merchadiseData}" var="merchadiseitem" scrollable="true"  scrollHeight="400" resizableColumns="false" paginator="true" rows="20" 
                                 paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" 
                                 rowsPerPageTemplate="10,50,100" selection="#{merchadiseBeanList.selectedmerchadise}" selectionMode="single">

                        <f:facet name="header">
                            Merchandise Report.
                        </f:facet>

                        <p:column sortBy="#{merchadiseitem.repMobile}" filterBy="#{merchadiseitem.repMobile}" headerText="Rep Mobile" style="width: 110px" >                     
                            <f:facet name="header">
                                <h:outputText value="Rep Mobile" />
                            </f:facet>
                            <h:outputText value="#{merchadiseitem.repMobile}" />
                        </p:column>
                        <p:column sortBy="#{merchadiseitem.dealerNo}" filterBy="#{merchadiseitem.dealerNo}" headerText="Dealer No" style="width: 100px" >                      
                            <f:facet name="header">
                                <h:outputText value="Dealer No" />
                            </f:facet>
                            <h:outputText value="#{merchadiseitem.dealerNo}" />
                        </p:column>

                        <p:column sortBy="#{merchadiseitem.weekNo}" filterBy="#{merchadiseitem.weekNo}" headerText="Week No" style="width: 110px" >                     
                            <f:facet name="header">
                                <h:outputText value="Week No" />
                            </f:facet>
                            <h:outputText value="#{merchadiseitem.weekNo}" />
                        </p:column> 

                        <p:column sortBy="#{merchadiseitem.brandId}" filterBy="#{merchadiseitem.brandId}" headerText="Brand Id" style="width: 110px" >                     
                            <f:facet name="header">
                                <h:outputText value="Brand Id" />
                            </f:facet>
                            <h:outputText value="#{merchadiseitem.brandId}" />
                        </p:column>

                        <p:column sortBy="#{merchadiseitem.percentage}" filterBy="#{merchadiseitem.percentage}" headerText="Percentage" style="width: 110px" >                     
                            <f:facet name="header">
                                <h:outputText value="Percentage" />
                            </f:facet>
                            <h:outputText value="#{merchadiseitem.percentage}" />
                        </p:column>

                        <p:column sortBy="#{merchadiseitem.total}" filterBy="#{merchadiseitem.total}" headerText="Total" style="width: 110px" >                     
                            <f:facet name="header">
                                <h:outputText value="Total" />
                            </f:facet>
                            <h:outputText value="#{merchadiseitem.total}" />
                        </p:column>

                        <p:column sortBy="#{merchadiseitem.merchandisingDone}" filterBy="#{merchadiseitem.merchandisingDone}" headerText="MerchandisingDone" style="width: 110px" >                     
                            <f:facet name="header">
                                <h:outputText value="MerchandisingDone" />
                            </f:facet>
                            <h:outputText value="#{merchadiseitem.merchandisingDone}" />
                        </p:column>     

                        <p:column sortBy="#{merchadiseitem.comments}" filterBy="#{merchadiseitem.comments}" headerText="Comments" style="width: 110px" >                     
                            <f:facet name="header">
                                <h:outputText value="Comments" />
                            </f:facet>
                            <h:outputText value="#{merchadiseitem.comments}" />
                        </p:column> 

                        <p:column sortBy="#{merchadiseitem.regDate}" filterBy="#{merchadiseitem.regDate}" headerText="Reg Date" style="width: 110px" >                     
                            <f:facet name="header">
                                <h:outputText value="Reg Date" />
                            </f:facet>
                            <h:outputText value="#{merchadiseitem.regDate}" />
                        </p:column>  

                        <f:facet name="footer">

                            <h:commandLink title="Export entire table Data to an Excel document." style="float: left">                                 
                                <h:graphicImage library="images" name="excelAll.png" />
                                <p:spacer width="10"   />
                                <p:dataExporter type="xls" target="tbl" fileName="Merchandising_Report_Full"
                                                postProcessor="#{exporter.postProcessXLS}"/>  
                            </h:commandLink> 

                            <h:commandLink title="Export Filtered Page Data: Filter and Sort the 
                                           data and ensure that all the data is in one page by changing the number of records per page" style="float: left">                             
                                <h:graphicImage library="images" name="excel2.png" />
                                <p:dataExporter type="xls" target="tbl" fileName="Merchandising_Report_Filtered" 
                                                pageOnly="true" postProcessor="#{exporter.postProcessXLS}"/>  
                            </h:commandLink>  

                            <p:commandButton value="View" image="ui-icon ui-icon-document-b" 
                                             update="hsc:display" oncomplete="hscDialog.show()" />

                            <p:commandButton type="button" image="ui-icon ui-icon-pin-s"  update="hsc:dlg"
                                             value="Show Map" onclick="dlg.show()" oncomplete="dlg.show()"/> 


                        </f:facet>

                    </p:dataTable>

                     <p:dialog widgetVar="dlg" width="625" height="400" modal="true"  
                              onShow="mymap.checkResize()" dynamic="true">                        



                         <p:gmap center="#{merchadiseBeanList.selectedmerchadise.latitude},
                                #{merchadiseBeanList.selectedmerchadise.longitude}" 
                                zoom="13" type="ROADMAP" draggable="true"  
                                 style="width:600px;height:400px" widgetVar="mymap" 
                                 model="#{merchadiseBeanList.simpleModel}" />  
                    </p:dialog>   

                    <p:dialog widgetVar="dllg" width="625" height="400" modal="true"  
                              onShow="imap.checkResize()">                        

                        <p:gmap  center="-1.29079655, 36.80600445" zoom="15" type="ROADMAP" draggable="true"  
                                 style="width:600px;height:400px" widgetVar="imap" />  
                    </p:dialog>  

                    <p:dialog header="Sales Record Detail" widgetVar="hscDialog" resizable="true" 
                              width="240" showEffect="clip" hideEffect="fold" modal="true" >


                        <h:panelGrid id="display" columns="2" cellpadding="3" cellspacing="3" >

                            <f:facet name="header">
                                <h:graphicImage library="images" name="logo.png" />
                            </f:facet>

                            <h:outputText value="Id" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.ID}" />

                            <h:outputText value="Rep Mobile Number" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.repMobile}" />

                            <h:outputText value="Week Number" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.weekNo}" />

                            <h:outputText value="Dealer No" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.dealerNo}" />

                            <h:outputText value="Brand Id" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.brandId}" />

                            <h:outputText value="Percentage" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.percentage}" /> 

                            <h:outputText value="MerchandisingDone" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.merchandisingDone}" /> 

                            <h:outputText value="Comments" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.comments}" /> 

                            <h:outputText value="Reg Date" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.regDate}" /> 

                            <h:outputText value="MerchandisingDone" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.merchandisingDone}" /> 

                            <h:outputText value="Latitude" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.latitude}" /> 

                            <h:outputText value="Longititude" />
                            <h:outputText value="#{merchadiseBeanList.selectedmerchadise.longitude}" /> 

                        </h:panelGrid>
                           <p:commandButton type="button" image="ui-icon ui-icon-pin-s"  update="hsc:dlg"
                                             value="Show Map" onclick="dlg.show()" oncomplete="dlg.show()"/> 
                    </p:dialog>
                </h:form>
            </ui:define>

这里的代码用于绘制标记到相应的纬度和经度:

 private MapModel simpleModel = new DefaultMapModel();
    LatLng coord1;
    double lati;
    double longi;

    public LatLng mapparams() {
        try {
            System.out.println("i am in smapparams method1");
            try {
                System.out.println("am checking fisrt");
                lati = this.selectedmerchadise.Latitude;
                longi = this.selectedmerchadise.Longitude;
                System.out.println("am checking fisrt3");
            } catch (NullPointerException np) {
                System.out.println("NP is catched " + np);
            } catch (Exception ex) {
                System.out.println("this is bean ex" + ex);
                System.out.println("coords at exception" + lati + "  " + longi);
            }
            if (longi != 0 && lati != 0) {
                System.out.println("i am in smapparams method3");
                coord1 = new LatLng(lati, longi);
                System.out.println("coords3: " + lati + " " + longi);
            } else {
                System.out.println("coords r null");
                coord1 = new LatLng(0, 0);
            }
        } catch (Exception ex) {
            System.out.println("this is the exceptions" + ex);
        }
        System.out.println("final cordianates" + coord1);
        return coord1;
    }

    public MapModel getSimpleModel() {    
        this.mapparams();
        System.out.println("i am in simple marker method");            
        simpleModel.addOverlay(new Marker(coord1, "Sales Rep Here"));    
        return simpleModel;
    } 

0 个答案:

没有答案