Google지도에서 마커 드래그 앤 드롭 마커

마커 이미지를지도 캔버스 외부에서 드래그하여 캔버스 안에 놓고 Google지도의 DOM 이벤트 수신기를 등록했지만 수신기 내부에 마커를 만들려고합니다. latLng 객체에 액세스 할 수 없으면 어떻게 점을 삭제할 수 있습니까?Google지도에서 마커 드래그 앤 드롭 마커

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

여기에 내가 MapCanvasProjection.fromContainerPixelToLatLng(Point) 기능에 액세스 할 수 있도록 빈 OverlayView를 만들어이 문제를 해결했습니다 내 자바 스크립트 코드

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 ɢʜʘʂʈ ʀɛɔʘɴ

입니다.

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

이 그럼 당신은 var에 오버레이 = initOverlay() 당신의() 함수를 초기화 호출 할 수 있습니다 : 여기

방금 당신에 추가 할 수있는 코드 조각이다. 그리고 overlay.fromPixelToLatLng()를 사용하여 drop() 함수에서 le LatLng를 가져옵니다.

이 정보가 도움이되기를 바랍니다. 또는 다른 사람이이 페이지에 착륙했습니다.

출처

2013-06-20 14:18:39

많은 감사를드립니다. – jarandaf

Thanks Buddy, 많은 상심을 저장했습니다. –

Google지도에서 마커 드래그 앤 드롭 마커

답변

관련 문제