PrimeFaces のデモで、マーカーの追加とドラッグ可能なマーカーの例を見てきました。ただし、これらの両方を 1 つの実用的な例に統合する必要があり、これまでのところ成功していません。
これが私がこれまでに持っているものです（コードの関連部分）
addevent.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 提供) を使用しています。
乾杯、OSiRiS