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