Primefaces GMap addMarker(JavaScript)+ selectMarker(overlaySelectEvent) [英] Primefaces GMap addMarker (JavaScript) + selectMarker (overlaySelectEvent)

问题描述

我一直在努力结合Primefaces展示柜中的GMap AddMarker和Selection示例.

I have been struggling to combine both the GMap AddMarker and Selection examples from the Primefaces Showcase.

我想在这里实现的目的是，在单击已使用JavaScript添加到地图的标记时，正确触发同步中触发的overlaySelectEvent.

What I try to achieve here is to get the overlaySelectEvent fired when clicking on a marker that has been added to the map using JavaScript, having also those markers in the map model, correctly in sync.

JSF和JavaScript:

JSF and 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>

后备豆:

@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?请注意，我不想更新"该组件，因为它在刷新时会闪烁，并且我需要使其更快，因为此地图将使它的某些制造商每分钟更新几次.

So the question is: is there a way to trigger the ajax overlaySelectEvent when clicking on these markers added using JavaScript? Notice I do not want to 'update' the component, because it flashes when refreshing and I need it to be fast because this map will get some of its makers updated several times a minute.

我将不胜感激.谢谢.

推荐答案

我最终仅使用JavaScript和Google Maps API进行了此操作，因为自从发布之日起，它似乎并不是在Primefaces中进行此操作的一种方法这个答案.

I ended up doing it using just JavaScript and the Google Maps API as it doesn't seem to be a way for doing it in Primefaces as of the date of this answer.

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

What I have done is passing all the map data from the server to the client using a element. Then, from the client, I just extract the information and build the map accordingly. I don't make use of the Primefaces gmap model, as it is not required, and the information is already stored in the backing bean.

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

Although Primefaces offers functionality to make use of Google Maps from the server side, it is a small layer on top of Google Maps API, so Javascript is required for advanced map features. Something understandable.

请转到 https://forum.primefaces.org/viewtopic.php?t=41013&p=129363 提供了一种解决方案，该方案可通过使所有primefaces事件侦听器保持工作状态来刷新地图内容而无需更新gMap组件，因此不会闪烁

Please, go to https://forum.primefaces.org/viewtopic.php?t=41013&p=129363 for a solution that refreshes the map content without updating the gMap component and, thus, not flashing, by also keeping all the primefaces event listeners working.

这篇关于Primefaces GMap addMarker(JavaScript)+ selectMarker(overlaySelectEvent)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！