如何使Google Map中的overlay div可拖动？

Question

我需要拖动div的位置。 我用下面的代码，但没有用。 我认为我在这里犯了一些错误。我还需要旋转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

但是，在Google Maps v3中，所有鼠标事件均由Google Maps捕获。 这是窍门。

---

捕获鼠标事件

为了捕获鼠标事件，需要在divideMouseTarget窗格中插入一个div（在我的代码中名为mouseTarget ）。 overlayMouseTarget是Google Maps v3中最顶层的图层。

但是它将.style.display=none为正常状态（不拖动）。 仅当您在mouseTarget div上向下拖动时，它才变为.style.display=block 。

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

---

拖曳事件

当您将鼠标移到mouseTarget上时，必须立即取消该事件，以防止拖动地图。

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

---

这是我对第一个问题的回答， I need to drag the position of the div.

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