谷歌地图从外面的地图拖放对象到谷歌地图

我正在一个项目上工作，我需要一个关于如何从地图外部拖放对象到其中的帮助。我尝试了大量的例子，但我没有找到解决方案，所以如果你可以给一个代码示例来帮助和感谢。谷歌地图从外面的地图拖放对象到谷歌地图

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

你为什么拒绝我的解决？我想补充一点，如果地图不在页面的左上角位置，您的方法无法正常工作。 – 2013-02-16 09:55:36

我不能拒绝 – kwicher 2013-02-16 18:19:25

修复marker-offset：http://stackoverflow.com/questions/18912744/drag-drop-an-object-into-google-maps-from-outside-the-map-marker-not-把-AT/18913950＃18913950 – 2013-09-20 10:00:46

谷歌地图从外面的地图拖放对象到谷歌地图

回答

相关问题