google maps arrastrar y soltar objetos en google maps desde fuera del Mapa

estoy trabajando en un proyecto y necesito ayuda sobre cómo arrastrar y soltar objetos desde fuera del mapa. Intenté multitud de ejemplos, pero no encontré la solución, así que si solo puede dar una muestra de código para ayudar y gracias.google maps arrastrar y soltar objetos en google maps desde fuera del Mapa

Fuente

2011-04-01 user379228

Compruebe si esto es más o menos lo que quería (tendrá que proporcionar un pequeño archivo de icono para arrastrarlo - actualice el nombre del archivo de forma acorde en la fuente). Solo mencionar que el estante con iconos para arrastrar puede colocarse en cualquier lugar también fuera del mapa.

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

Fuente

2011-05-07 14:54:39 kwicher

¿Por qué se rechaza mi dosis? Me gustaría agregar que su método no funciona correctamente en caso de que el mapa no esté en la posición superior izquierda en la página. –

No puedo rechazar – kwicher

Solución para el marcador-desplazamiento: http://stackoverflow.com/questions/18912744/drag-drop-an-object-into-google-maps-from-outside-the-map-marker-not- put-at/18913950 # 18913950 –

google maps arrastrar y soltar objetos en google maps desde fuera del Mapa

Respuesta

Cuestiones relacionadas