google maps지도 외부에서 Google지도로 객체를 드래그 앤 드롭

나는 프로젝트에서 작업하고 있으며지도 외부에서 객체를 드래그 앤 드롭하는 방법에 대한 도움이 필요합니다. 나는 여러 가지 예제를 시도했지만 해결책을 찾지 못했기 때문에 도움이되고 감사할만한 샘플 코드를 제공 할 수 있다면 솔루션을 찾지 못했습니다.google maps지도 외부에서 Google지도로 객체를 드래그 앤 드롭

출처

2011-04-01 user379228

원하는지 확인하십시오 (드래그 할 작은 아이콘 파일을 제공해야합니다 - 원본에서 파일 이름을 업데이트해야합니다). 드래그 할 아이콘이있는 선반을지도 외부에 배치 할 수 있습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<style type="text/css"> 
*{ 
margin: 0px; 
padding: 0px; 
} 
html { height: 100% } 
body{ height: 100%; margin: 0px; padding: 0px;} 
#map_canvas { height: 100% } 
#shelf{position:fixed; top:10px; left:500px; height:100px;width:200px;background:white;opacity:0.7;} 
#draggable {position:absolute;top:10px, left:10px; width: 30px; height: 30px;z-index:1000000000;} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#draggable").draggable({helper: 'clone', 
stop: function(e) { 
    var point=new google.maps.Point(e.pageX,e.pageY); 
    var ll=overlay.getProjection().fromContainerPixelToLatLng(point); 
    placeMarker(ll); 
    } 
}); 
}); 
</script> 
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript"> 
var $map; 
var $latlng; 
var overlay; 
function initialize() { 
var $latlng = new google.maps.LatLng(66.5, 25.733333); 
var myOptions = { 
    zoom: 3, 
    center: $latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControlOptions: { 
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
    position: google.maps.ControlPosition.TOP_LEFT }, 
    zoomControl: true, 
zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.LARGE, 
    position: google.maps.ControlPosition.LEFT_TOP 
}, 
scaleControl: true, 
scaleControlOptions: { 
    position: google.maps.ControlPosition.TOP_LEFT 
}, 
streetViewControl: false, 

    panControl:false, 

}; 
$map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions); 

overlay = new google.maps.OverlayView(); 
overlay.draw = function() {}; 
overlay.setMap($map); 
} 
function placeMarker(location) { 
    var marker = new google.maps.Marker({ 
    position: location, 
    map: $map, 
    icon:'spring-hot.png' 
    }); 

} 
</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas"> </div> 
<div id='shelf'>Drag the image<br/><img id="draggable" src='spring-hot.png'/><div> 
</body> 
</html>

출처

2011-05-07 14:54:39 kwicher

왜 내 수정을 거부 했습니까? 페이지의 왼쪽 상단 위치가 아닌지도의 경우 메소드가 제대로 작동하지 않는다고 덧붙이고 싶습니다. –

거부 할 수 없습니다 – kwicher

마커 오프셋 수정 : http://stackoverflow.com/questions/18912744/drag-drop-an-object-into-google-maps-from-outside-the-map-marker-not- put-at/18913950 # 18913950 –

google maps지도 외부에서 Google지도로 객체를 드래그 앤 드롭

답변

관련 문제