0

我正在使用谷歌地图示例代码，这个：http : //www.wolfpil.de/v3/drag-from-outside.html 在地图外有 3 个可拖动标记。我想要的只是使用revert'invalid'选项使标记返回到原始位置，以防标记没有落在地图中但我没有把它放在正确的行中。你能否给我一个提示，我必须把它放在哪里才能让它工作？

function initDrag(e) {

 if(!e) var e = window.event;

  // Drag image's parent div element
 obj = e.target ? e.target.parentNode : e.srcElement.parentElement;
  if(obj.className != "drag") {
  if(e.cancelable) e.preventDefault();
    obj = null;
  return;
 }

if (obj) {
 // The currently dragged object always gets the highest z-index
 z_index++;
 obj.style.zIndex = z_index.toString();

   xpos = e.clientX - obj.offsetLeft;
 ypos = e.clientY - obj.offsetTop;

 document.onmousemove = moveObj;
}
 return false;
 }


function moveObj(e) {

if(obj && obj.className == "drag") {

  if(!e) var e = window.event;
   obj.style.left = e.clientX - xpos + "px";
  obj.style.top = e.clientY - ypos + "px";

  obj.onmouseup = function() {

  var gd = map.getDiv();
  var mLeft = gd.offsetLeft;
  var mTop = gd.offsetTop;

  var mWidth = gd.offsetWidth;
  var mHeight = gd.offsetHeight;

  var areaLeft = drag_area.offsetLeft;
  var areaTop = drag_area.offsetTop;

  var oWidth = obj.offsetWidth;
  var oHeight = obj.offsetHeight;

  // The object's pixel position relative to the document
  var x = obj.offsetLeft + areaLeft + oWidth/2;
  var y = obj.offsetTop + areaTop + oHeight/2;

  // Check if the cursor is inside the map div
  if (x > mLeft && x < (mLeft + mWidth) && y > mTop && y < (mTop + mHeight)) {

// Difference between the x property of iconAnchor
// and the middle of the icon width
var anchorDiff = 1;

// Find the object's pixel position in the map container
var g = google.maps;
var pixelpoint = new g.Point(x - mLeft -anchorDiff, y - mTop + (oHeight/2));

// Corresponding geo point on the map
var proj = dummy.getProjection();
var latlng = proj.fromContainerPixelToLatLng(pixelpoint);

// Create a corresponding marker on the map
var src = obj.firstChild.getAttribute("src");
createDraggedMarker(latlng, src);

// Create dragged marker anew
fillMarker();
   }
   };
   }
   return false;
   }


 function fillMarker() {

var m = document.createElement("div");
m.style.position = "absolute";
m.style.width = "32px";
m.style.height = "32px";

 var left;
 if (obj.id == "m1") {
 left = "0px";
 } else if (obj.id == "m2") {
 left = "50px";
 } else if (obj.id == "m3") {
  left = "100px";
 }
 m.style.left = left;

 // Set the same id and class attributes again
// m.setAttribute("id", obj.id);
// m.setAttribute((document.all?"className":"class"), "drag");
 m.id = obj.id;
 m.className = "drag";

  // Append icon
 var img = document.createElement("img");
 img.src = obj.firstChild.getAttribute("src");
 img.style.width = "32px";
   img.style.height = "32px";
 m.appendChild(img);
 drag_area.replaceChild(m, obj);

 // Clear initial object
 obj = null;
 }


 function highestOrder() {

/**
* The currently dragged marker on the map
* always gets the highest z-index too
*/
 return z_index;
}


 function createDraggedMarker(point, src) {

var g = google.maps;
var image = new g.MarkerImage(src,
  new g.Size(32, 32),
  new g.Point(0, 0),
  new g.Point(15, 32));

  var shadow = new g.MarkerImage("http://maps.gstatic.com/mapfiles/kml/paddle/A_maps.shadow.png",
  new g.Size(59, 32),
  new g.Point(0, 0),
  new g.Point(15, 32));

  var marker = new g.Marker({ position: point, map: map,
    clickable: true, draggable: true,
    raiseOnDrag: false,
    icon: image, shadow: shadow, zIndex: highestOrder()
  });

  g.event.addListener(marker, "click", function() {
  actual = marker;
  var lat = actual.getPosition().lat();
  var lng = actual.getPosition().lng();

   iw.setContent(lat.toFixed(6) + ", " + lng.toFixed(6));
   iw.open(map, this);
   });

   g.event.addListener(marker, "dragstart", function() {
  // Close infowindow when dragging the marker whose infowindow is open
  if (actual == marker) iw.close();
  // Increment z_index
   z_index++;
   marker.setZIndex(highestOrder());
       });
           }

感谢您的时间和耐心。

4

1 回答 1

0

在代码片段之后

fillMarker();
}

添加这样的 else 语句：

fillMarker();
} else {
  //if the marker does not land on the map reset marker location
  var left;
  if (obj.id == "m1") {
    left = "0px";
  } else if (obj.id == "m2") {
    left = "50px";
  } else if (obj.id == "m3") {
    left = "100px";
  }
   obj.style.left = left;
   obj.style.top = "70px";
}

jsFiddle 到完整代码：http: //jsfiddle.net/6ECVs/

于 2012-04-05T10:50:20.503 回答