Question

我想在谷歌地图上创建标记，方法是从地图画布外拖动标记图像并将其放入画布内，我已经注册了谷歌地图的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>

这是我的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);

Answer 1

我通过创建一个空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;
}

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

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

在谷歌地图中拖放标记

1 个答案: