我在PrimeFaces演示中看到了一个关于添加标记和可拖动标记的示例。但是，我需要将这些内容整合到一个工作示例中，到目前为止还没有成功。
这是我到目前为止（代码的相关部分）
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>
Backing 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（事件）;” 这个监听器不起作用
如果我删除onPointClick就可以了。
但是现在我必须选择 - 我想让我的标记可拖动，或者我想有可能添加它们。我显然想要两件事......
任何想法可能是什么问题？
我在stackoverflow上找到了这个主题，无法真正解决问题。 How to create a draggable marker?
我正在使用JBoss AS 7.1.1 PrimeFaces 3.5 JSF 2.1（由JBoss提供）
干杯， OSIRIS
答案 0 :(得分：1)
不幸的是，我无法确切地告诉你你做错了什么，因为我无法理解你发布的代码（不完整和格式错误......对不起）。但是，在熟悉了在线示例 我认为 之后，我可以告诉您为什么在将标记添加到地图后没有拖动标记。我也会为你提供我的工作样本，因为你已经等了很长时间才得到答案。
当您通过javascript调用map.addOverLay时，您确实在客户端设置了一个标记，并且（假设您的代码有效）在单击Add后更新服务器端。但是，您需要使用服务器上更新的标记集合重新加载 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()"/>
<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>
真的是老实说。至于你发现的类似问题的答案......我也无法理解它。无论如何，这是代码
<强>的index.xhtml
@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()));
}
}
<强> MapBean.java
<script>common.js
此文件包含javascript。我使用的是Netbeans，这个文件位于以下目录Web Pages / resources / javascript中名为javascript的文件夹中。无需将其与JSF混合使用。尽量保持清洁，从长远来看它会对你有所帮助。代码基本上是the same as the example online，因此您可以从那里复制它。我唯一做的就是取出{{1}}标签并将其全部移动到该文件中。干杯。
答案 1 :(得分：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。