Primefaces GMap addMarker（JavaScript）+ selectMarker（overlaySelectEvent）

Question

我一直在努力結合GMap AddMarker和Primefaces Showcase中的選擇示例。

我在這裏實現的是在點擊已添加到地圖上的標記時觸發overlaySelectEvent，該標記使用JavaScript，同時也具有地圖模型中的這些標記。

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; 
    } 
} 

所以現在的問題是：是否有觸發AJAX overlaySelectEvent時使用JavaScript點擊這些標記添加的方法嗎？注意我不想'更新'這個組件，因爲它在刷新時會閃爍，我需要它很快，因爲這張地圖會讓它的一些製造商每分鐘更新幾次。

我將不勝感激任何幫助。謝謝。

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尋找一種解決方案，通過保持所有primefaces事件偵聽器正常工作來刷新地圖內容而不更新gMap組件，從而不閃爍。