Перетаскивание маркера в google maps

Я хочу создать маркер на карте Google, перетащив изображение маркера из-за границы карты и вытащить его внутри холста, я зарегистрировал прослушиватель dom событий google maps, но внутри слушателя у меня есть нет доступа к объекту latLng, как мне найти latLng точки сброса?Перетаскивание маркера в google maps

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

источник

2013-05-23 ɢʜʘʂʈ ʀɛɔʘɴ

Я решить эту проблему, создав пустой 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; 
}

Затем вы можете вызвать вар наложения = initOverlay() в ин инициализации() функцию. И используйте overlay.fromPixelToLatLng(), чтобы получить le LatLng в вашей функции drop().

Надеюсь, это поможет вам. Или кто-то другой приземлился на этой странице.

источник

2013-06-20 14:18:39

Очень ценим! – jarandaf

Спасибо, приятель, сохранил много страдания –

Перетаскивание маркера в google maps

ответ

Смежные вопросы