我在 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 提供)
干杯,奥西里斯