簡體   English   中英

如何創建可拖動標記?

[英]How to create a draggable marker?

下面的代碼可以創建標記。

但是我想創建一個可拖動標記,問題是在創建標記后沒有將click事件發送到服務器。

創建標記時, 可拖動標記設置為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回調。

因此,我使用EL表達式設置了此屬性,因此在創建標記后,該表達式的計算結果將為null ,組件p:gmap在AJAX調用中更新,並且可拖動事件現在可以正常工作;)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM