如何创建可拖动标记? [英] How to create a draggable marker?

问题描述

下面的代码可以创建标记.

Code below it's able to create a marker.

但是我想创建一个可拖动的标记，问题是在创建标记后不将click事件发送到服务器.

But I want to create a draggable marker, problem is that is not sending the click event to the server after the marker has been created.

创建标记时，可拖动标志设置为true.

When the markes is created the draggable flag is set to true.

有什么想法吗?

<p:gmap id="gmap" center="36.890257,30.707417" zoom="13" type="HYBRID"

style="width:600px;height:400px"
model="#{mapBean.emptyModel}"
onPointClick="handlePointClick(event);"
widgetVar="map">
<p:ajax event="markerDrag" listener="#{mapBean.onMarkerDrag}" update="messages" />
</p:gmap>

<p:dialog widgetVar="dlg" effect="FADE" effectDuration="0.5" close="false" fixedCenter="true">
<h:form prependId="false">
<h:panelGrid columns="1">
<h:outputLabel value="Are you sure?"/>


<f:facet name="footer">
<p:commandButton value="Yes"
actionListener="#{mapBean.addMarker}"
update=":messages"
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>

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

function handlePointClick(event) {

console.log("click event");

console.log(event.marker);

if (currentMarker == null) {
document.getElementById('lat').value = event.latLng.lat();
document.getElementById('lng').value = event.latLng.lng();

currentMarker = new google.maps.Marker({
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
});

map.addOverlay(currentMarker);

dlg.show();
}
}

function markerAddComplete() {
//currentMarker = null; Only one can be added.
dlg.hide();
}

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

return false;
}
</script>

推荐答案

问题是由 p:gmap 的属性 onPointClick 引起的.在这种情况下，这是对函数 handlePointClickEvent()的JavaScript回调.

Problem was being caused with the attribute onPointClick of p:gmap. This is a Javascript Callback to the function handlePointClickEvent() in this case.

因此，我使用 EL 表达式设置了此属性，因此在创建标记后，该表达式的计算结果为 null ，组件为 p:gmap 在AJAX调用中进行更新，并且可拖动事件现在可以正常工作;)

So I setted this attribute with an EL expression, so after creating the marker, this expression would evaluate to null, component p:gmap updates in an AJAX call, and draggable events work now ;)

这篇关于如何创建可拖动标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！