我使用 primefaces 的谷歌地图工具. 我希望我的用户能够在 map 上只放置一个标记。 坐标值应存储在托管 bean 变量中。

我该怎么做？ 看看我到目前为止做了什么:

我创建了 map :

    <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 page 中一样工作但我有两个问题:

问题一:marker一旦放置，就不能再放置了。

问题 2:在 map 所在的同一表单中，还有一些其他元素，例如文本字段。我注意到当我单击位于 map 所在表单中的提交按钮时不会发生验证，实际上表单根本没有提交(这在我添加 map 之前没有发生)，为什么 map 会中断验证？

最佳答案

Problem 1: Once the marker is placed, it cannot be placed again.

这个问题是由以下原因引起的:

1. 您已将纬度和经度绑定(bind)到不同的 bean (NewOfferSupportController)，而不是保存 map 模型的 bean (MapBean)。您应该使用 MapBean PrimeFaces 展示中的示例作为 NewOfferSupportController 的设计起点 bean 。它即存储标记集。隐藏的输入必须指向该 bean，因为在 addMarker()方法将添加这些值。在展示示例中，您只需重命名 MapBean类名和重命名#{mapBean} #{newOfferSupportController} View 中的引用.

2. 您的 NewOfferSupportController bean 是请求范围的，而它应该是 View 范围的。

   @ManagedBean
   @ViewScoped
   public class NewOfferSupportController implements Serializable {}
   

   只要您通过 Ajax 与同一个表单交互， View 范围的 bean 就会一直存在。但是请求范围的 bean 会在每个请求上重新创建(因此也在每个 Ajax 请求上!)，从而丢弃之前放置在 map 中的标记以及在添加标记之前输入的输入。

Problem 2: In the same form where the map is there are some other elements such as text fields. Actually the form does not get submitted at all(This didn't occur before i added the map), why is the map disrupting the validation?

这对我有用。这可能是因为您的 NewOfferSupportController被放置在请求范围而不是 View 范围中。

回顾一下，这是我在测试中使用的代码:

查看:

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

(我没有更改展示示例中的 <script> 代码，只需原样添加)

bean :

@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.
}

关于java - 如何在谷歌地图上放置标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5840802/