如何在谷歌地圖上放置標記

Question

我使用來自primefaces的谷歌地圖工具。 我希望我的用戶能夠在地圖上只放置一個標記。 坐標值應存儲在托管bean變量中。

我怎樣才能做到這一點？ 看看到目前為止我做了什么：

我創建了地圖：

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

<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">  
    <h:form prependId="false">  
        <h:panelGrid columns="2">  
            <h:outputLabel for="title" value="Title:" />  
            <p:inputText id="title" value="#{mapBean.title}" />  

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

        <h:inputHidden id="lat" value="#{newOfferSupportController.mapLocationX}" />  
        <h:inputHidden id="lng" value="#{newOfferSupportController.mapLocationY}" />  
    </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())  
            });  

            map.addOverlay(currentMarker);  

            dlg.show();  
        }     
    }  

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

        currentMarker = null;  
        dlg.hide();  
    }  

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

        return false;  
    }  
</script>

我還對包含坐標的變量進行了調整：

@ManagedBean
@RequestScoped
public class NewOfferSupportController {

private float mapLocationX;
private float mapLocationY;

//Get & set methods

這一切都在primefaces 頁面中工作，但我有兩個問題：

問題1：放置標記后，無法再放置標記。

問題2：在地圖相同的形式中，還有一些其他元素，如文本字段。 我注意到當我單擊地圖所在表單中的提交按鈕時，驗證不會發生，實際上表單根本沒有提交（這在我添加地圖之前沒有發生），為什么地圖會中斷驗證？

Answer 1

問題1：放置標記后，無法再放置標記。

此問題是由以下原因引起的：

1. 你勢必緯度和經度，以提供不同的bean（ NewOfferSupportController ）比持有地圖模型（豆MapBean ）。 您應該在PrimeFaces展示中使用MapBean示例作為NewOfferSupportController bean的設計起點。 它即存儲標記集。 隱藏的輸入必須指向該bean，因為在addMarker()方法中將添加這些值。 從陳列櫃例子中，你只需要重新命名MapBean類的名稱，並重新命名#{mapBean}通過在視圖中引用#{newOfferSupportController} 。

2. 您的NewOfferSupportController bean是請求范圍的，它應該是視圖范圍。

    @ManagedBean @ViewScoped public class NewOfferSupportController implements Serializable {} 

   只要您通過Ajax與相同的表單進行交互，就可以查看作用域的bean。 但是請求scoped bean在每個請求上都會被重新創建（因此也會在每個Ajax請求上重新創建！），因此會丟棄之前放置在地圖中的標記以及在添加標記之前輸入的輸入。

---

問題2：在地圖相同的形式中，還有一些其他元素，如文本字段。 實際上表格根本沒有提交（這在我添加地圖之前沒有發生），為什么地圖會破壞驗證？

這適合我。 這可能是因為您的NewOfferSupportController已放置在請求范圍而不是視圖范圍中。

回顧一下，這是我在測試中使用的代碼：

視圖：

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

<h:form>
    <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" style="width:600px;height:400px"  
        model="#{mapBean.mapModel}" onPointClick="handlePointClick(event);" widgetVar="map" />
    <h:inputText value="#{mapBean.input}" required="true" />
    <p:commandButton value="submit" action="#{mapBean.submit}" update="messages" />
</h:form>

<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">  
    <h:form prependId="false">  
        <h:panelGrid columns="2">  
            <h:outputLabel for="title" value="Title:" />  
            <p:inputText id="title" value="#{mapBean.title}" />  

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

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

（我沒有更改showcase示例中的<script>代碼，只是將其保持不變）

豆：

@ManagedBean
@ViewScoped
public class MapBean implements Serializable {  

    private MapModel mapModel;  
    private String title;  
    private double lat;  
    private double lng;  
    private String input;

    public MapBean() {  
        mapModel = new DefaultMapModel();  
    }  

    public void addMarker(ActionEvent actionEvent) {  
        mapModel.addOverlay(new Marker(new LatLng(lat, lng), title));  
        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));  
    }  

    public void submit() {
        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Form submitted", "Amount markers: " + mapModel.getMarkers().size() + ", Input: " + input));
    }

    public void addMessage(FacesMessage message) {  
        FacesContext.getCurrentInstance().addMessage(null, message);  
    }  

    // Getters+setters.
}