Question

我一直在努力将Primeaps 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？请注意，我不想更新＆＃39;组件，因为它在刷新时闪烁，我需要它快速，因为这个地图会让它的一些制造商每分钟更新几次。

我将不胜感激任何帮助。感谢。

Answer 1

我最终只使用JavaScript和Google Maps API来完成它，因为截至本答复发布之日，它似乎不是在Primefaces中实现这一目标的方式。

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

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

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

Primefaces GMap addMarker（JavaScript）+ selectMarker（overlaySelectEvent）

1 个答案: