Fatal编程技术网
  • java/
  • Java 创建可拖动的标记

Java 创建可拖动的标记

java jsf primefaces

Java 创建可拖动的标记,java,jsf,primefaces,jboss7.x,Java,Jsf,Primefaces,Jboss7.x,我在PrimeFaces演示中看到了一个关于添加标记和可拖动标记的示例。然而，我需要将这两个东西整合到一个工作示例中，但到目前为止还没有成功 以下是我到目前为止所掌握的信息（代码的相关部分） addevent.xhtml 所以问题是我可以让我的标记可以拖拽——但只有在客户端，onMarkerDrag方法永远不会被调用 我们已经观察到该属性是何时设置的 onPointClick=“handlePointClick（事件）；” 此侦听器不工作 如果我删除onPointClick，它就会工作 但现

我在PrimeFaces演示中看到了一个关于添加标记和可拖动标记的示例。然而，我需要将这两个东西整合到一个工作示例中，但到目前为止还没有成功

以下是我到目前为止所掌握的信息（代码的相关部分）

addevent.xhtml

所以问题是我可以让我的标记可以拖拽——但只有在客户端，onMarkerDrag方法永远不会被调用

我们已经观察到该属性是何时设置的 onPointClick=“handlePointClick（事件）；” 此侦听器不工作

如果我删除onPointClick，它就会工作

但现在我必须做出选择——我想让我的标记可以拖动，或者我想有可能添加它们。很明显我想要两样东西

你知道可能是什么问题吗

我在stackoverflow上找到了这个主题，但我还没有真正找到解决方案。

我正在使用JBossAS 7.1.1 PrimeFaces 3.5 JSF2.1（由JBoss提供）

干杯，
OSiRiS

不幸的是，我无法准确地告诉您您做错了什么，因为我无法理解您发布的代码（不完整且格式不正确…抱歉）。但是，在熟悉了在线示例后，我想我可以告诉您，为什么在地图上添加标记后，没有拖动标记。我还将向您提供我的工作样本，因为您已经等待了这么久的答案

当您通过javascript调用
map.addOverLay
时，您确实在客户端设置了一个标记，并且（假设您的代码工作正常）在单击Add之后更新了服务器端。但是，您需要使用服务器上更新的标记集合重新加载
p:gmap
。添加新标记时，
p:gmap
仍在引用旧集合。因此，当你试图移动它时，你不能。就
p:gmap
而言，没有任何
MarkerDragEvent
被解雇，因为您没有拖动其标记之一。您只需触摸由
map.addOverlay
设置的静态图像。因此，要解决这个问题，您需要在单击添加后通过将其添加到
p:ajax
列表中来更新
p:gmap

<p:commandButton id="test" value="Add"   
                                     actionListener="#{mapBean.addMarker}"   
                                     update=":growl, :gmap"   
                                     oncomplete="markerAddComplete()"/>
common.js

此文件包含javascript。我使用的是Netbeans，该文件位于以下目录Web Pages/resources/javascript中一个名为javascript的文件夹中。无需将其与JSF混合使用。尽量保持清洁，从长远来看这会对你有帮助。代码基本上是简单的，所以你可以从那里复制它。我所做的唯一一件事就是拿出
标签并将其全部移动到该文件中。干杯

以下是我添加可拖动标记的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Remove an overlay</title>
    <link href="css/style.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script>
        var map;
        var markers = [];
        var marker, infowindow;
        function initialize() {
            var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
            var mapOptions = {
                zoom: 12,
                center: haightAshbury,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            map = new google.maps.Map(document.getElementById('map'),
                    mapOptions);

            google.maps.event.addListener(map, 'click', function (event) {
                addMarker(event.latLng);
            });
        }

        // Add a marker to the map and push to the array.
        function addMarker(location) {
            var temp
            if (marker!=null) {
                temp=marker
                marker=null;
            }
            marker = new google.maps.Marker({
                position: location,
                map: map,
                draggable: true
            });
            google.maps.event.addListener(marker, 'click', markerListener);

            function markerListener() {
                alert(this.getPosition());
                // this.setIcon(...
            }
            markers.push(marker);
        }

        // Sets the map on all markers in the array.
        function setAllMap(map) {
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(map);
            }
        }

        // Removes the overlays from the map, but keeps them in the array.
        function clearOverlays() {
            setAllMap(null);
        }

        // Shows any overlays currently in the array.
        function showOverlays() {
            setAllMap(map);
        }

        // Deletes all markers in the array by removing references to them.
        function deleteOverlays() {
            clearOverlays();
            markers = [];
        }


        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

</head>
<body>
<div id="panel">
    <input onclick="clearOverlays();" type=button value="Hide Overlays">
    <input onclick="showOverlays();" type=button value="Show All Overlays">
    <input onclick="deleteOverlays();" type=button value="Delete Overlays">
</div>


<div id="map"></div>
<p>Click on the map to add markers.</p>
</body>
</html>
对我来说，通过查看您的代码来判断问题是非常困难的。但是您可以将上面的代码作为模型，并相应地形成您的代码。请注意，它使用谷歌地图api版本3

<p:dialog widgetVar="dlg" modal="true" effect="FADE" showEffect="explode" effectDuration="0.5" close="false">
    <h:form prependId="false">


        <h:panelGrid columns="2">
            <h:outputLabel for="title" value="Title" />
            <p:inputText id="title" value="#{mapBean.title}" />
            <h:outputLabel for="title" value="Location type" />
            <h:selectOneMenu id="location" value="#{mapBean.location}" required="true">
                <f:selectItem itemLabel="Select One" itemValue="" />
                <f:selectItems value="#{mapBean.locations}" />
            </h:selectOneMenu>

            <f:facet name="footer">
                <p:commandButton value="Add" actionListener="#{mapBean.addMarker}"
                                 oncomplete="markerAddComplete()"/>
                <p:button 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>

public void addMarker(ActionEvent actionEvent) {  

    logger.info("MapBean add marker event ?");

    LatLng coord = new LatLng(lat,lng); 

    String iconUrl;

    if (this.location == LocationType.START) {
        logger.info("green icon");
        iconUrl = "http://maps.google.com/mapfiles/ms/micons/green-dot.png";
    }
    else if (this.location == LocationType.END) {
        logger.info("red icon");
        iconUrl = "http://maps.google.com/mapfiles/ms/micons/red-dot.png";
    } 
    else {
        logger.info("yellow icon");
        iconUrl = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png";
    }

    Marker marker = new Marker(coord, "Description: "+this.getTitle()+"\n Type:"+this.location.toString(),this.location,iconUrl);
//  marker.setDraggable(true); // this was of course un-commented previously

    //logger.info("is draggable:"+marker.isDraggable());


    mapModel.addOverlay(marker);
  //marker.setDraggable(true); 

    addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng));  
}  

 public void onMarkerDrag(MarkerDragEvent event) {  

        logger.info("DRAGGING !!!");

        Marker marker = event.getMarker();  

        logger.info("Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng());
    }

<p:commandButton id="test" value="Add"   
                                     actionListener="#{mapBean.addMarker}"   
                                     update=":growl, :gmap"   
                                     oncomplete="markerAddComplete()"/> 

<h:head>
    <title>Facelet Title</title>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <h:outputScript name="javascript/common.js" />
</h:head>
<h:body>
    <p:growl id="growl" showDetail="true"/>  

    <p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID" 
            style="width:600px;height:400px" model="#{mapBean.draggableModel}" 
            onPointClick="handlePointClick(event);" widgetVar="map">
        <p:ajax event="markerDrag" listener="#{mapBean.onMarkerDrag}" update="growl" />  
    </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="#{mapBean.title}" />  

                <f:facet name="footer">  
                    <p:commandButton id="test" value="Add"   
                                     actionListener="#{mapBean.addMarker}"   
                                     update=":growl, :gmap"   
                                     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>  
</h:body>

@ManagedBean
public class MapBean implements Serializable {  

    private MapModel draggableModel;  
    private String title;  
    private double lat;  
    private double lng;  

    public MapBean() {  
        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","Konyaalti","http://maps.google.com/mapfiles/ms/micons/red-dot.png"));  
        draggableModel.addOverlay(new Marker(coord2, "Ataturk Parki", "Ataturk Parki","http://maps.google.com/mapfiles/ms/micons/red-dot.png"));  
        draggableModel.addOverlay(new Marker(coord3, "Karaalioglu Parki", "Karaalioglu Parki","http://maps.google.com/mapfiles/ms/micons/red-dot.png"));  
        draggableModel.addOverlay(new Marker(coord4, "Kaleici", "Kaleici", "http://maps.google.com/mapfiles/ms/micons/red-dot.png"));  

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

    public MapModel getDraggableModel() {  
        return draggableModel;  
    }  

    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 onMarkerDrag(MarkerDragEvent event) {  
        Marker marker = event.getMarker();  
        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Dragged", "Lat:" + marker.getLatlng().getLat() + ", Lng:" + marker.getLatlng().getLng()));  
    }  

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

    public void addMarker(ActionEvent actionEvent) {  
        Marker marker = new Marker(new LatLng(lat, lng), title, "SOME VALUE", "http://maps.google.com/mapfiles/ms/micons/red-dot.png");  
        marker.setDraggable(true);  
        draggableModel.addOverlay(marker);  

        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Marker Added", "Lat:" + lat + ", Lng:" + lng + "Is marker draggable ?" + marker.isDraggable()));  
    }  
}  

<!DOCTYPE html>
<html>
<head>
    <title>Remove an overlay</title>
    <link href="css/style.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script>
        var map;
        var markers = [];
        var marker, infowindow;
        function initialize() {
            var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
            var mapOptions = {
                zoom: 12,
                center: haightAshbury,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            map = new google.maps.Map(document.getElementById('map'),
                    mapOptions);

            google.maps.event.addListener(map, 'click', function (event) {
                addMarker(event.latLng);
            });
        }

        // Add a marker to the map and push to the array.
        function addMarker(location) {
            var temp
            if (marker!=null) {
                temp=marker
                marker=null;
            }
            marker = new google.maps.Marker({
                position: location,
                map: map,
                draggable: true
            });
            google.maps.event.addListener(marker, 'click', markerListener);

            function markerListener() {
                alert(this.getPosition());
                // this.setIcon(...
            }
            markers.push(marker);
        }

        // Sets the map on all markers in the array.
        function setAllMap(map) {
            for (var i = 0; i < markers.length; i++) {
                markers[i].setMap(map);
            }
        }

        // Removes the overlays from the map, but keeps them in the array.
        function clearOverlays() {
            setAllMap(null);
        }

        // Shows any overlays currently in the array.
        function showOverlays() {
            setAllMap(map);
        }

        // Deletes all markers in the array by removing references to them.
        function deleteOverlays() {
            clearOverlays();
            markers = [];
        }


        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

</head>
<body>
<div id="panel">
    <input onclick="clearOverlays();" type=button value="Hide Overlays">
    <input onclick="showOverlays();" type=button value="Show All Overlays">
    <input onclick="deleteOverlays();" type=button value="Delete Overlays">
</div>


<div id="map"></div>
<p>Click on the map to add markers.</p>
</body>
</html>

html, body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: medium;
}
#map {
  width: 1000px;
  height: 750px;
  border: 1px solid black;
}