2012-04-05 13 views
0

Googleマップのサンプルコード(http://www.wolfpil.de/v3/drag-from-outside.html)のマップ外にドラッグ可能なマーカーが3つあります。私が望むのは、マーカがマップにドロップされずに正しい行に配置できなかった場合にマーカーを元の位置に戻すために、無効な「無効」オプションを使用することだけです。私はそれを働かせるためにどこに置かなければならないのですか?どこに挿入するか '無効'

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()); 
     }); 
      } 

あなたの時間と忍耐力に感謝します。

答えて

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を:asnwer ERSELアーカーためhttp://jsfiddle.net/6ECVs/

+0

おかげで、今マーカーでありますもうdraggableではありません... – Marc

+0

jsFiddleページに完全なコードをコピーして貼り付けましたか?それは働いていないのですか? –

+0

残念ながら私の間違いは、部分的に機能していて、地図にドロップされたマーカーは元の位置に再び表示され、地図の外にドロップされたマーカーは元の位置から70px下がって表示されます...これを修正する方法? – Marc

関連する問題