2

我想通过从地图画布外部拖动标记图像并将其放到画布内来在谷歌地图上创建标记，我已经注册了谷歌地图的 dom 事件侦听器，但在侦听器内部我无法访问 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>

这是我的javascript代码

var geocoder;
var map;

$(function() {

    $("#go").click(function()
    {
        map.setCenter(new google.maps.LatLng($("#lat").val(), $("#lng").val()));
    });


});

function initialize() {
    // prepare Geocoder
    geocoder = new google.maps.Geocoder();

    var myLatlng = new google.maps.LatLng(33.718629,73.059082);

    var myOptions = { // default map options
        zoom: 2,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
    mapDiv = document.getElementById('gmap_canvas');

    google.maps.event.addListener(map, 'dragend', function(event)
    {
        document.getElementById('lat').value = map.getCenter().lat();
        document.getElementById('lng').value = map.getCenter().lng();
    });

    google.maps.event.addListener(map, 'click', function(e)
    {
        alert(e.latLng);
    });

    google.maps.event.addDomListener(mapDiv, 'drop', function(event)
    {
        alert(event);
        google.maps.event.trigger(map, 'click');
    });
}

function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    alert(ev.latLng);
}

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

1 回答 1

6

我已经通过创建一个空的OverlayView来访问MapCanvasProjection.fromContainerPixelToLatLng(Point)函数来解决这个问题。

这是一段代码，您可以在自己的代码中添加：

/**
 * 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。

我希望这能帮到您。或其他人登陆此页面。

于 2013-06-20T14:18:39.230 回答