javascript - Drag and drop marker in google maps - Stack Overflow|江阴雨辰互联

i want to create marker on google map through dragging marker image from outside the map canvas and drop it inside the canvas, i've registered dom event listener of google maps but inside the listener i have no access to latLng object, how do i find the latLng of dropping point?

<!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/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=";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="mand">
              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="mand">
               Markers: <br />
               <img src="img/marker.png" id="draggable" draggable="true" ondragstart="drag(event)" />
           </div>
           <div class="mand" id="debug">
           </div>
        </div>
    </div>
</body>
<html>

and here is my javascript code

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);

<!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./ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

    <script type="text/javascript" src="https://www.google./jsapi"></script>
    <script type="text/javascript" src="http://maps.googleapis./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="mand">
              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="mand">
               Markers: <br />
               <img src="img/marker.png" id="draggable" draggable="true" ondragstart="drag(event)" />
           </div>
           <div class="mand" id="debug">
           </div>
        </div>
    </div>
</body>
<html>

and here is my javascript code

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);

Share Improve this question edited Sep 18, 2017 at 18:47 Jeff Puckett 41.2k19 gold badges124 silver badges174 bronze badges asked May 23, 2013 at 17:21 user2009750 3,1976 gold badges37 silver badges58 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

I've solve this problem by creating an empty OverlayView to have access to the MapCanvasProjection.fromContainerPixelToLatLng(Point) function.

Here is a piece of code you can just add in yours :

/**
 * initialize a empty overlay used to pute 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);
}


/** 
 * pute 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;
}

Then you can call var overlay = initOverlay() in your in initialize() function. And use overlay.fromPixelToLatLng() to get le LatLng in your drop() function.

I hope this will help you. Or someone else landing on this page.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745467947a4628999.html

javascript - Drag and drop marker in google maps - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Drag and drop marker in google maps - Stack Overflow

1 Answer 1

相关推荐