Javascript 谷歌地图中的拖放标记_Javascript_Google Maps_Events_Drag And Drop

Javascript 谷歌地图中的拖放标记

javascript google-maps events

Javascript 谷歌地图中的拖放标记,javascript,google-maps,events,drag-and-drop,Javascript,Google Maps,Events,Drag And Drop,我想通过从地图画布外部拖动标记图像并将其放置在画布内部，在google地图上创建标记，我已经注册了google地图的dom事件侦听器，但在侦听器中我无法访问latLng对象，如何找到放置点的latLng <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Active Users</title> <link type="text/css" rel="st

我想通过从地图画布外部拖动标记图像并将其放置在画布内部，在google地图上创建标记，我已经注册了google地图的dom事件侦听器，但在侦听器中我无法访问latLng对象，如何找到放置点的latLng

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <title>Active Users</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=maps&sensor=false"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="big_wrapper">
        <div id="gmap_canvas" ondragover="allowDrop(event)"></div>
        <div id="controls">
           <div class="command">
              Coordinates: <br />
              <input type="text" id="lat" value="33.718629" /><br />

              <input type="text" id="lng" value="73.059082" /><br />
              <input type="button" value="Go" id="go" />
           </div>

           <div class="command">
               Markers: <br />
               <img src="img/marker.png" id="draggable" draggable="true" ondragstart="drag(event)" />
           </div>
           <div class="command" id="debug">
           </div>
        </div>
    </div>
</body>
<html>

我已经通过创建一个空的函数来解决这个问题

下面是一段代码，您可以在其中添加：

/**
 * initialize a empty overlay used to compute latlng from pixel
 */
function initOverlay() {
    function DropOverlay(map) {
        this.setMap(map);
    }
    DropOverlay.prototype = new google.maps.OverlayView();
    DropOverlay.prototype.onAdd = function()    { /* Nothing to add */    };
    DropOverlay.prototype.onRemove = function() { /* Nothing to remove */ };
    DropOverlay.prototype.draw = function()     { /* Nothing to draw */   };
    DropOverlay.prototype.fromPixelToLatLng = function(x, y) {
        var offset = divOffset(map.getDiv());
        return this.getProjection().fromContainerPixelToLatLng(new google.maps.Point(x - offset.x, y - offset.y));
    } 
    return new DropOverlay(map);
}


/** 
 * compute absolute position on page of a DOM element
 */
function divOffset(div) {
    var offset = {x:0, y:0};
    do {
        offset.x += div.offsetLeft;
        offset.y += div.offsetTop;
    } while(div = div.offsetParent);

    return offset;
}

然后可以在in initialize（）函数中调用var overlay=initOverlay（）。并使用overlay.fromPixelToLatLng（）在drop（）函数中获取le LatLng

我希望这对你有帮助。或者其他人登录此页面。

谢谢，伙计，省去了很多心痛

/**
 * initialize a empty overlay used to compute latlng from pixel
 */
function initOverlay() {
    function DropOverlay(map) {
        this.setMap(map);
    }
    DropOverlay.prototype = new google.maps.OverlayView();
    DropOverlay.prototype.onAdd = function()    { /* Nothing to add */    };
    DropOverlay.prototype.onRemove = function() { /* Nothing to remove */ };
    DropOverlay.prototype.draw = function()     { /* Nothing to draw */   };
    DropOverlay.prototype.fromPixelToLatLng = function(x, y) {
        var offset = divOffset(map.getDiv());
        return this.getProjection().fromContainerPixelToLatLng(new google.maps.Point(x - offset.x, y - offset.y));
    } 
    return new DropOverlay(map);
}


/** 
 * compute absolute position on page of a DOM element
 */
function divOffset(div) {
    var offset = {x:0, y:0};
    do {
        offset.x += div.offsetLeft;
        offset.y += div.offsetTop;
    } while(div = div.offsetParent);

    return offset;
}