2016-08-03 47 views
0

我試圖製作一個定期更新幾個標記位置並每隔幾秒顯示一個新位置的Web應用程序。我成功地實現了我想要處理PrimeFaces的任務,但每次POLL更新地圖時,都會返回到原始位置。 下面的代碼工作片:定期更新PrimeFaces中標記的位置gmap

<p:gmap id="presentation-map" center="41.381542, 2.122893" zoom="15" type="ROADMAP" model="#{pBean.mapModel}" style="width:400px;height:400px" /> 
    <p:poll interval="5" listener="#{pBean.printLocation}" update="presentation-map" /> 

現在,我試圖用跟蹤的位置,但爲了使用它,地圖有權採取它從支持bean原來的位置。這部分出於某種原因阻止了地圖的渲染。

XHTML地圖內容:

<p:gmap id="presentation-map" center="#{pBean.center}" zoom="#{pBean.zoom}" type="ROADMAP" model="#{pBean.mapModel}" style="width:400px;height:400px" > 
     <p:ajax event="stateChange" listener="#{pBean.onStateChange}" /> 
    </p:gmap> 
    <p:poll interval="5" listener="#{pBean.printLocation}" update="presentation-map" /> 

後臺bean的內容:

import org.primefaces.event.map.StateChangeEvent; 
import org.primefaces.model.map.*; 
import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.stereotype.Component; 

import javax.annotation.PostConstruct; 
import javax.faces.application.FacesMessage; 
import javax.faces.bean.ManagedBean; 
import javax.faces.bean.ViewScoped; 
import javax.faces.context.FacesContext; 
import java.io.Serializable; 
import java.util.List; 

@Component 
@ManagedBean(name = "pBean") 
@ViewScoped 
public class PBean implements Serializable{ 

private MapModel mapModel; 
private Marker marker; 
private long id; 

private int zoom; 
private LatLng center; 

@Autowired 
TService service; 

@Autowired 
Pocket pocket; 

@PostConstruct 
public void init(){ 
    zoom = 15; 
    center = new LatLng(41.381542, 2.122893); 
    mapModel = new DefaultMapModel(); 
} 

public void printLocation(){ 
    double[] buffer = pocket.retrieveLocation(15); 
    LatLng position = new LatLng(buffer[0],buffer[1]); 

    List<Marker> markers = mapModel.getMarkers(); 
    if(markers != null && !markers.isEmpty()){ 
     mapModel.getMarkers().removeAll(markers); 
    } 

    mapModel.addOverlay(new Marker(position,"test position")); 

} 

public void onStateChange(StateChangeEvent event){ 
    this.zoom = event.getZoomLevel(); 
    this.center = event.getCenter(); 
} 


public int getZoom(){...} 

public void setZoom(int zoom){...} 

public LatLng getCenter(){...} 

public void setCenter(LatLng center){...} 

public Marker getMarker(){...} 

public void setMarker(Marker marker){...} 

public long getId(){...} 

public void setId(long id){...} 

public MapModel getMapModel(){...} 

public void setMapModel(MapModel mapModel){...} 

誰能在這裏告訴我爲什麼地圖無法呈現,或者提供一些可供選擇?

對代碼的一般建議也是受歡迎的。

PS。我知道有類似的事情正在通過使用JavaScript來完成,但我無法讓它們工作,我不知道爲什麼。我願意接受這種方法,但由於缺乏JS經驗,我需要一些100%的工作示例來處理。

編輯1

作爲每@chaeschuechli建議,我使用的瀏覽器的控制檯。這表明以下錯誤:

SyntaxError: missing) after argument list 

它指出以下行:

<div id="j_idt12:presentation-map" style="width:400px;height:400px"></div><script id="j_idt12:presentation-map_s" type="text/javascript">$(function() {PrimeFaces.cw('GMap','widget_j_idt12_presentation_map',{id:'j_idt12:presentation-map',mapTypeId:google.maps.MapTypeId.ROADMAP,center:new google.maps.LatLng(Lat:51.730726, Lng:19.478617),zoom:15,fitBounds:false,behaviors:{stateChange:function(ext,event) {PrimeFaces.ab({s:"j_idt12:presentation-map",e:"stateChange",p:"j_idt12:presentation-map"},ext);}}});});</script><script id="j_idt12:j_idt14_s" type="text/javascript">$(function(){PrimeFaces.cw("Poll","widget_j_idt12_j_idt14",{id:"j_idt12:j_idt14",frequency:5,autoStart:true,fn:function(){PrimeFaces.ab({s:"j_idt12:j_idt14",f:"j_idt12",u:"j_idt12:presentation-map"});}});});</script><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:1" value="5249292647095880660:-5542792410948729336" autocomplete="off" /> 

而且問題appers是:

center:new google.maps.LatLng(Lat:51.730726, Lng:19.478617) 

其中瀏覽器顯然是希望 「」 或「) 「而不是」:「在Lat之後。

雖然這清楚地表明gmap從bean中獲取所有數據,這很好,但我不知道如何處理這個問題。

+0

瀏覽器控制檯中是否有任何錯誤? – chaeschuechli

+0

@chaeschuechli是的,在Lat傳遞給中心後,瀏覽器期待「)」。我發佈了下面的整個代碼。 – alseides

+0

有幫助嗎?如果不是的話,爲什麼不,如果是的話,請接受答案(如果真的有幫助,請回復) – Kukeltje

回答

0

您的中心字段的吸氣器返回類型與PrimeFaces預期的不同。根據PrimeFaces showcase它應該是一個字符串而不是LatLng。

和(也可根據展示),你需要使用

center = event.getCenter().getLat() + "," + event.getCenter().getLng(); 

我從來沒有使用這個組件,而是由你的靜態中心版和動態的和尋找差異一個小調查,以設置中心,然後在展示和谷歌,這是不難找到。哎喲,寫這個答案比實際調查花費了更多的時間;-)