将可拖动标记添加到Google地图

Question

我在PrimeFaces演示中已经看到了一个有关添加标记和可拖动标记的示例。一位大佬）你能帮我吗？ 这是添加标记的示例：

这是ponitBean：

@Component 
@Scope 
@ManagedBean (name = "pointBean")
public class PointBean {

    // ========================================================================= 
    // ATTRIBUTES 
    // ========================================================================= 
    private Point point ;
    private PointService pointService;
    private MapModel emptyModel;







    // ========================================================================= 
    // CONSTRUCTORS 
    // ========================================================================= 


    public PointBean() {
        super();
        // TODO Auto-generated constructor stub
    }
    // ========================================================================= 
    // METHODS 
    // ========================================================================= 

    public void savePoint(){
        pointService.savePoint(point);
        addMarker();
    }

    @SuppressWarnings("unchecked")
    public List<Point>getAllPoint(){
        return pointService.getAllPoint();
    }


    @PostConstruct
    public void reint(){
        point = new Point();
    }

    @PostConstruct
    public void init() {
        emptyModel = new DefaultMapModel();

    }

    public void addMarker() {
    Marker marker=new Marker(new LatLng(point.getLatitude(), point.getLongitude()));

        emptyModel.addOverlay((marker));

        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + point.getLatitude() + ", Lng:" + point.getLongitude()));
    }


     // ========================================================================= 
    // GETTERS & SETTERS 
    // ========================================================================= 

    public Point getPoint() {
        return point;
    }

    public void setPoint(Point point) {
        this.point = point;
    }
    public MapModel getEmptyModel() {
        return emptyModel;
    }

    public void setEmptyModel(MapModel emptyModel) {
        this.emptyModel = emptyModel;
    }



    @Autowired
    public void setPointService(PointService pointService) {
        this.pointService = pointService;
    }


}

这是我的xhtml文件：

<h:head>

    <title>Home</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</h:head>
<h:body>


<p:growl id="messages" showDetail="true" />
 <p:growl id="growl" showDetail="true" />
<p:gmap id="gmap" center="36.890257,10.365411" zoom="13" type="HYBRID" style="width:600px;height:400px"
    model="#{pointBean.emptyModel}" onPointClick="handlePointClick(event);" widgetVar="map" >
    </p:gmap>

<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="#{pointBean.point.titre}" />

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

            </f:facet>
        </h:panelGrid>

         <h:inputHidden id="longitude" value="#{pointBean.point.latitude}" />
          <h:inputHidden id="latitude" value="#{pointBean.point.longitude}" />

    </h:form>
</p:dialog>

<script type="text/javascript">
    var currentMarker = null;

    function handlePointClick(event) {
        if(currentMarker === null) {

            document.getElementById('longitude').value = event.latLng.lng();
            document.getElementById('latitude').value = event.latLng.lat();

            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>

</h:body>
</html>

我应该添加些什么才能有可拖动的标记！！ 这是primefaces中可拖动标记的示例：

这是dragableMarkerbean：

@ManagedBean
@ViewScoped
public class DraggableMarkersView implements Serializable {

private MapModel draggableModel;

    private Marker marker;


    @PostConstruct
    public void init() {
        draggableModel = new DefaultMapModel();

        //Shared coordinates
        LatLng coord1 = new LatLng(36.879466, 30.667648);
        LatLng coord2 = new LatLng(36.883707, 30.689216);
        LatLng coord3 = new LatLng(36.879703, 30.706707);
        LatLng coord4 = new LatLng(36.885233, 30.702323);

        //Draggable
        draggableModel.addOverlay(new Marker(coord1, "Konyaalti"));
        draggableModel.addOverlay(new Marker(coord2, "Ataturk Parki"));
        draggableModel.addOverlay(new Marker(coord3, "Karaalioglu Parki"));
        draggableModel.addOverlay(new Marker(coord4, "Kaleici"));

        for(Marker premarker : draggableModel.getMarkers()) {
            premarker.setDraggable(true);
        }
    }

    public MapModel getDraggableModel() {
        return draggableModel;
    }

    public void onMarkerDrag(MarkerDragEvent event) {
        marker = event.getMarker();

        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Dragged", "Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng()));
    }
}

这是xhtml：

<h:form>      
    <p:growl id="growl" showDetail="true" />

    <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"  model="#{draggableMarkersView.draggableModel}" style="width:600px;height:400px">
        <p:ajax event="markerDrag" listener="#{draggableMarkersView.onMarkerDrag}" update="growl" />
    </p:gmap>
</h:form>

请你能帮我！ 为了在第一个示例中具有可拖动标记，我应该添加什么！

Answer 1

您必须添加javascript handlePointClick。
添加： currentMarker.setDraggable(true);
之后： currentMarker = new google.maps.Marker ....