periodisch aktualisierte Position von Markern in PrimeFaces gmap

Question

Ich versuche, eine Web-Anwendung, die regelmäßig die Position von mehreren Markern aktualisiert und dann alle paar Sekunden neue Positionen anzuzeigen. Es ist mir gelungen, fast genau das zu erreichen, was ich mit PrimeFaces machen möchte, aber jedes Mal, wenn POLL die Karte aktualisiert, kehrt sie zu ihrer ursprünglichen Position zurück. Unten ist das Arbeits Stück Code:

<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" /> 

Nun, ich Spur von Position zu verwenden versucht zu halten, sondern um es zu benutzen, Karte hat von Backing Bean seinen ursprünglichen Position zu übernehmen. Dieser Teil verhindert aus irgendeinem Grund, dass die Karte überhaupt gerendert wird.

xhtml Karteninhalt:

<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" /> 

Backing Bean Inhalt:

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){...} 

Kann mir hier jemand sagen, warum Karte nicht wiedergegeben werden kann, oder eine Alternative anbieten?

Alle Vorschläge für den Code im Allgemeinen sind ebenfalls willkommen.

PS. Ich weiß, es gibt Beispiele für ähnliche Dinge, die durch die Verwendung von JavaScript erreicht werden, aber ich konnte sie nicht zur Arbeit bringen, und ich bin mir nicht sicher warum. Ich bin offen für diesen Ansatz, aber aufgrund der fehlenden Erfahrung mit JS würde ich ein 100% iges Arbeitsbeispiel brauchen, um damit zu arbeiten.

bearbeiten 1

Per @chaeschuechli Vorschlag, benutzte ich Browser-Konsole. Es zeigte die folgende Fehlermeldung:

SyntaxError: missing) after argument list 

es auf folgende Zeile hingewiesen:

<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" /> 

Und das Problem Appers sein:

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

wo Browser erwartet offenbar "" oder „) "statt": "nach Lat.

Während dies deutlich zeigt, dass gmap alle Daten erhält, die es von der Bean bekommen sollte, was gut ist, habe ich keine Ahnung, wie ich mit diesem Problem umgehen soll.

Answer 1

Der Rückgabetyp Ihres Getter für Ihr Centerfeld ist nicht so, wie es von PrimeFaces erwartet wird. Laut der PrimeFaces showcase sollte es ein String und kein LatLng sein.

Und (auch nach der Vitrine) Sie das Zentrum einstellen müssen dann durch

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

mit mir nie dieser Komponente, sondern durch eine kleine Untersuchung der Unterschiede zwischen statischem Zentrum Version und dynamischen verwendet und auf der Suche Bei der Vitrine und Google war es nicht schwer zu finden. Hey, es hat mehr gedauert, diese Antwort zu schreiben als die eigentliche Untersuchung ;-)