-3

我在 PrimeFaces 演示中看到了有关添加标记和可拖动标记的示例。但是,我需要将这两个东西集成到一个工作示例中,并且到目前为止还没有成功。

这是我到目前为止所拥有的(代码的相关部分)

添加事件.xhtml

<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();

            dlg.show();

            console.log("HandlePoint Click do we have anything?"+event.latLng.lat());
        }

        return true;
    }

    function markerAddComplete() {

        currentMarker = new google.maps.Marker({
            position:new google.maps.LatLng(document.getElementById('lat').value,  document.getElementById('lng').value)
        });



        var title = document.getElementById('title');
        var type = document.getElementById('location');
        var typeOut;

        console.log("type:"+type);
        console.log("type value:"+type.value);
        console.log("type value to string"+type.value.toString());

        if (type.value.toString() == "START") {
            typeOut = "Start";
            currentMarker.setIcon("http://maps.google.com/mapfiles/ms/micons/green-dot.png");
        }
        else if (type.value.toString() == "END") {
            typeOut = "End";
            currentMarker.setIcon("http://maps.google.com/mapfiles/ms/micons/red-dot.png");
        }
        else {
            typeOut = "Checkpoint";

            currentMarker.setIcon("http://maps.google.com/mapfiles/ms/micons/yellow-dot.png");
        }

        currentMarker.setTitle("Description: "+title.value+"\nType: "+typeOut);
        title.value = "";
        type.value = "";
        typeOut = "";
        map.addOverlay(currentMarker);
        // currentMarker.setDraggable(true);

        currentMarker = null;
        dlg.hide();


    }

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

        return false;
    }
</script>

...

                <p:ajax event="overlaySelect" listener="#{mapBean.onMarkerSelect}" />
                <p:gmapInfoWindow>
                    <p:outputPanel style="text-align:center;display:block;margin:auto:">

                        <h:outputText value="Title: #{mapBean.currentMarker.title}"/><br/>
                        <p:commandButton value="Delete" action="#{mapBean.deleteCurrentMarker}" partialSubmit="true" process="gmap" update="gmap" />
                    </p:outputPanel>

                </p:gmapInfoWindow>
                <!-- ignore -->
                <ui:remove>
                    <p:ajax event="markerDrag" listener="#{mapBean.onMarkerDrag}" />
                </ui:remove>
            </p:gmap>

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

支持 Bean MapBean.java

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());
    }

所以问题是我可以使我的标记可拖动-但仅在客户端,永远不会调用 onMarkerDrag 方法。

我们观察到当这个属性被设置时 onPointClick="handlePointClick(event);" 这个监听器不起作用

如果我删除 onPointClick 它可以工作。

但现在我必须做出选择——要么让我的标记可拖动,要么我希望有可能添加它们。我显然想要两样东西..

任何想法可能是什么问题?

我在stackoverflow上找到了这个话题,真的想不出解决办法。 如何创建可拖动的标记?

我正在使用 JBoss AS 7.1.1 PrimeFaces 3.5 JSF 2.1(由 JBoss 提供)

干杯,奥西里斯

4

2 回答 2

1

不幸的是,我无法确切地告诉您您做错了什么,因为我无法理解您发布的代码(不完整且格式错误......对不起)。但是,在熟悉了在线示例之后,我想 我可以告诉您为什么在您将标记添加到地图后没有被拖动。我还将为您提供我的工作样本,因为您已经等待了这么久的答案。

当您map.addOverLay通过 javascript 调用时,您确实在客户端设置了一个标记,并且(假设您的代码有效)在单击添加后更新服务器端。但是,您需要重新加载 p:gmap服务器上更新的标记集合。当您添加新标记时,p:gmap仍在引用旧集合。因此,当您尝试移动它时,您无法移动它。就p:gmap没有MarkerDragEvent被解雇而言,因为你没有拖动它的标记之一。您只是在触摸由 设置的静态图像map.addOverlay。因此,要解决此问题,您需要p:gmap在单击添加后通过将其添加到p:ajax列表中进行更新

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

这真的是老实说。至于您发现的类似问题的答案......我也无法理解。无论如何,这是代码

索引.xhtml

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

MapBean.java

@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()));  
    }  
}  

common.js

该文件包含 javascript。我使用的是 Netbeans,该文件位于以下目录 Web Pages/resources/javascript 中名为 javascript 的文件夹中。无需将其与 JSF 混合。尽量保持清洁,从长远来看,它会对你有所帮助。该代码与在线示例基本相同,因此您可以从那里复制它。我唯一做的就是取出<script>标签并将其全部移动到该文件中。干杯。

于 2013-07-01T07:26:31.373 回答
0

这是我添加可拖动标记的代码:

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

css/style.css 文件:

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

通过你的代码来判断问题对我来说是非常困难的。但是你可以以上面的代码为模型,并相应地形成你的代码。请注意,它使用谷歌地图 api 版本 3。

于 2013-07-03T15:33:03.997 回答