Question

我试图创建一个定期更新多个标记位置的Web应用程序，然后每隔几秒显示一个新位置。我设法几乎完全实现了我想用PrimeFaces做的事情，但每次POLL更新地图时，它都会回到原来的位置。以下是工作代码：

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

现在，我试图用来跟踪位置但是为了使用它，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" />

问题似乎是：

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

浏览器显然希望＆＃34;，＆＃34;或＆＃34;）＆＃34;而不是＆＃34;：＆＃34;在Lat。之后。

虽然这清楚地表明gmap从bean获取所有数据，这很好，我不知道如何处理这个问题。

Answer 1

您的中心字段的getter的返回类型不是PrimeFaces所期望的。根据{{3}}，它应该是String而不是LatLng。

并且（也根据展示）你需要设置中心然后使用

b_el.next_sibling    # contains " Test title"

我从未使用过此组件，但通过对静态中心版本和动态版本之间的差异进行一些调查，并查看展示和谷歌，这并不难找到。哎呀，写这个答案要比实际调查花更多的时间; - ）

定期更新PrimeFaces gmap中标记的位置

1 个答案: