我正在开发一种解决方案,用于在通过移动应用程序提交数据时映射现场人员的位置。从移动应用程序提交的所有数据都发送到远程数据库,我使用 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;
}