Primefaces GMap addMarker (JavaScript) + selectMarker (overlaySelectEvent)

Question

我一直在努力将 Primefaces Showcase 中的 GMap AddMarker 和 Selection 示例结合起来。

我在这里尝试实现的是在单击已使用 JavaScript 添加到地图的标记时触发 overlaySelectEvent，并且地图模型中的这些标记也正确同步。

JSF 和 JavaScript：

<p:growl id="messages" showDetail="true" />

<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:600px;height:400px"
    model="#{mapBackingBean.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" />

<p:ajax event="overlaySelect" listener="#{mapBackingBean.onMarkerSelect}" update="growl" />

<p:dialog widgetVar="dlg" showEffect="fade">
    <h:form prependId="false">
        <h:panelGrid columns="2">
            <h:outputLabel for="title" value="Title:" />
            <p:inputText id="title" value="#{mapBackingBean.title}" />

            <f:facet name="footer">
                <p:commandButton value="Add" actionListener="#{mapBackingBean.addMarker}" update=":messages" oncomplete="markerAddComplete()" />
                <p:commandButton value="Cancel" onclick="return cancel()" />
            </f:facet>
        </h:panelGrid>

        <h:inputHidden id="lat" value="#{mapBackingBean.lat}" />
        <h:inputHidden id="lng" value="#{mapBackingBean.lng}" />
    </h:form>
</p:dialog>

<script type="text/javascript">
    var currentMarker = null;

    function handlePointClick(event) {
        if(currentMarker === null) {
            document.getElementById('lat').value = event.latLng.lat();
            document.getElementById('lng').value = event.latLng.lng();

            currentMarker = new google.maps.Marker({
                position:new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
            });

            PF('map').addOverlay(currentMarker);

            PF('dlg').show();
        }   
    }

    function markerAddComplete() {
        var title = document.getElementById('title');
        currentMarker.setTitle(title.value);
        title.value = "";

        currentMarker = null;
        PF('dlg').hide();
    }

    function cancel() {
        PF('dlg').hide();
        currentMarker.setMap(null);
        currentMarker = null;

        return false;
    }

</script>

支持 bean：

@ManagedBean
@ViewScoped
public class MapBackingBean implements Serializable {

  private MapModel emptyModel;

  private Marker marker;

    private String title;

    private double lat;

    private double lng;

    @PostConstruct
    public void init() {
        emptyModel = new DefaultMapModel();
    }

    public MapModel getEmptyModel() {
        return emptyModel;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public double getLat() {
        return lat;
    }

    public void setLat(double lat) {
        this.lat = lat;
    }

    public double getLng() {
        return lng;
    }

    public void setLng(double lng) {
        this.lng = lng;
    }

    public void addMarker() {
        Marker marker = new Marker(new LatLng(lat, lng), title);
        emptyModel.addOverlay(marker);

        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));
    }

    public void onMarkerSelect(OverlaySelectEvent event) {
        marker = (Marker) event.getOverlay();

        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Selected", marker.getTitle()));
    }

    public Marker getMarker() {
        return marker;
    }
}

所以问题是：有没有办法在点击这些使用 JavaScript 添加的标记时触发 ajax overlaySelectEvent？请注意，我不想“更新”组件，因为它在刷新时会闪烁，我需要它快速，因为此地图将使其某些制造商每分钟更新几次。

我将不胜感激。谢谢。

Answer 1

我最终只使用了 JavaScript 和 Google Maps API，因为截至本答案发布之日，这似乎不是在 Primefaces 中执行此操作的一种方式。

我所做的是使用一个元素将所有地图数据从服务器传递到客户端。然后，我从客户端提取信息并相应地构建地图。我不使用 Primefaces gmap 模型，因为它不是必需的，并且信息已经存储在支持 bean 中。

虽然 Primefaces 提供了从服务器端使用 Google 地图的功能，但它是 Google 地图 API 之上的一个小层，因此高级地图功能需要 Javascript。可以理解的东西。

编辑：请转至 https://forum.primefaces.org/viewtopic.php?t=41013&p=129363 获取刷新地图内容而不更新 gMap 组件的解决方案，因此不会闪烁，同时保持所有 primefaces 事件侦听器工作。