如何在谷歌地图可叠加覆盖div？

Question

我需要拖动div的位置。我使用下面的代码，但没有工作。我觉得我做了一些错误，在here.also我需要旋转的div，这样我可以在正确的位置放置图像

var overlay; 

DebugOverlay.prototype = new google.maps.OverlayView(); 

function initialize() { 
    var mapOptions = { 
     zoom: 15, 
     center: new google.maps.LatLng(40.743388, -74.007592) 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    var swBound = new google.maps.LatLng(40.73660837340877, -74.01852328); 
    var neBound = new google.maps.LatLng(40.75214181, -73.99661518216243); 
    var bounds = new google.maps.LatLngBounds(swBound, neBound); 

    var srcImage = 'http://library.marist.edu/pix/LibMap3.jpg'; 

    overlay = new DebugOverlay(bounds, srcImage, map); 

    var markerA = new google.maps.Marker({ 
     position: swBound, 
     map: map, 
     draggable: true 
    }); 

    var markerB = new google.maps.Marker({ 
     position: neBound, 
     map: map, 
     draggable: true 
    }); 

    google.maps.event.addListener(markerA, 'drag', function() { 

     var newPointA = markerA.getPosition(); 
     var newPointB = markerB.getPosition(); 
     var newBounds = new google.maps.LatLngBounds(newPointA, newPointB); 
     overlay.updateBounds(newBounds); 
    }); 

    google.maps.event.addListener(markerB, 'drag', function() { 

     var newPointA = markerA.getPosition(); 
     var newPointB = markerB.getPosition(); 
     var newBounds = new google.maps.LatLngBounds(newPointA, newPointB); 
     overlay.updateBounds(newBounds); 
    }); 

    google.maps.event.addListener(markerA, 'dragend', function() { 

     var newPointA = markerA.getPosition(); 
     var newPointB = markerB.getPosition(); 
     console.log("point1" + newPointA); 
     console.log("point2" + newPointB); 
    }); 

    google.maps.event.addListener(markerB, 'dragend', function() { 
     var newPointA = markerA.getPosition(); 
     var newPointB = markerB.getPosition(); 
     console.log("point1" + newPointA); 
     console.log("point2" + newPointB); 
    }); 

} 

function DebugOverlay(bounds, image, map) { 
    this.bounds_ = bounds; 
    this.image_ = image; 
    this.map_ = map; 
    this.div_ = null; 
    this.setMap(map); 
} 

DebugOverlay.prototype.onAdd = function() { 

    var div = document.createElement('div'); 
    div.style.borderStyle = 'none'; 
    div.style.borderWidth = '0px'; 
    div.style.position = 'absolute'; 
    var img = document.createElement('img'); 
    img.src = this.image_; 
    img.style.width = '100%'; 
    img.style.height = '100%'; 
    img.style.opacity = '0.5'; 
    img.style.position = 'absolute'; 
    div.appendChild(img); 
    this.div_ = div; 
    var panes = this.getPanes(); 
    panes.overlayLayer.appendChild(div); 
}; 

DebugOverlay.prototype.draw = function() { 
    debugger; 
    var overlayProjection = this.getProjection(); 
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); 
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); 
    var div = this.div_; 
    div.style.left = sw.x + 'px'; 
    div.style.top = ne.y + 'px'; 
    div.style.width = (ne.x - sw.x) + 'px'; 
    div.style.height = (sw.y - ne.y) + 'px'; 
}; 


DebugOverlay.prototype.updateBounds = function (bounds) { 
    this.bounds_ = bounds; 
    this.draw(); 
}; 

DebugOverlay.prototype.onRemove = function() { 
    this.div_.parentNode.removeChild(this.div_); 
    this.div_ = null; 
}; 


google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

（我花了太多的时间长于我希望在第一...）

据我了解你的问题和你的代码，你想要直接拖动地板图像，角落标记跟着它，对吗？

HTML5支持拖动事件。 http://www.w3schools.com/html/html5_draganddrop.asp

但是，在谷歌地图v3中，所有鼠标事件都被谷歌地图捕获。 这里是诀窍。

---

捕获鼠标事件

为了抓老鼠的事件，你需要插入一个div（名为mouseTarget在我的代码）到overlayMouseTarget窗格。 overlayMouseTarget是Google Maps v3中最顶层的。

但它设置.style.display=none在正常状态（不拖动）。只有当你将鼠标放在mouseTarget div上时，它才会变成.style.display=block。

但是，即使在正常状态下，mouseTarget div也必须赶上图像的位置。

---

拖曳事件

当你鼠标按下在mouseTarget，你必须为了防止拖动地图马上取消该事件。

然后，你需要处理的dragstart，拖，并dragleave事件自己。 这意味着您需要按照鼠标光标位置，然后重新计算图像位置和标记位置。

---

这里是我的第一个问题I need to drag the position of the div.

https://jsfiddle.net/wf9a5m75/wj65aLrk/