如何在Google地图上放置标记

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> 

我也greated变量，将持有的坐标：

@ManagedBean 
@RequestScoped 
public class NewOfferSupportController { 

private float mapLocationX; 
private float mapLocationY; 

//Get & set methods 

的所有作品，如primefaces page但我有两个问题：

问题1：标记放置后，它不能再次放置。

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

Answer 1

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

此问题是由以下因素引起：

1. 你势必纬度和经度，以提供不同的bean（NewOfferSupportController）比持有地图模型豆（MapBean） 。您应该在PrimeFaces展柜中使用MapBean示例作为NewOfferSupportController bean的设计起点。它即存储标记集。隐藏的输入必须指向该bean，因为在addMarker()方法中，这些值将被添加。从展示示例中，您只需将MapBean类名重命名，并在#{newOfferSupportController}的视图中将#{mapBean}重命名为#{mapBean}。

2. 您的NewOfferSupportController bean是请求作用域，而它应该是视图作用域。

   只要您与Ajax使用相同的表单进行交互，就可以查看有效范围的bean。但是请求范围的bean会在每次请求时重新创建（并且因此也会在每个Ajax请求上重新创建），因此会删除映射之前放置的标记以及添加标记之前输入的标记。

---

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被放置在请求范围内而不是视图范围内。

总括来说，这里是我在我的测试中使用的代码：

观点：

<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>代码，只需添加它不变）

豆：

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