2011-04-01 40 views
14

के बाहर से Google मानचित्र में ऑब्जेक्ट खींचें और छोड़ें। मैं एक प्रोजेक्ट पर काम कर रहा हूं और मुझे मानचित्र के बाहर से वस्तुओं को खींचने और ड्रॉप करने के तरीके के बारे में एक सहायता चाहिए। मैंने कई उदाहरणों की कोशिश की लेकिन मुझे समाधान नहीं मिला, इसलिए यदि आप सहायता और धन्यवाद के लिए कोड का नमूना दे सकते हैं।Google मानचित्र मानचित्र

उत्तर

31

जांचें कि क्या आप चाहते हैं कि यह कम या कम है (आपको खींचने के लिए एक छोटी आइकन फ़ाइल प्रदान करने की आवश्यकता होगी - स्रोत में फ़ाइल नाम को अद्यतन करें)। खींचने के लिए आइकन के साथ शेल्फ का जिक्र करने के लिए मानचित्र के बाहर कहीं भी रखा जा सकता है।

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

कश्मीर

+0

क्यों तुम मेरे ठीक अस्वीकार किया? मैं यह जोड़ना चाहता हूं कि पृष्ठ पर बाएं शीर्ष स्थिति पर मानचित्र के मामले में आपकी विधि ठीक से काम नहीं कर रही है। –

+0

मैं – kwicher

+2

को अस्वीकार नहीं कर सकता मार्कर-ऑफ़सेट के लिए ठीक करें: http://stackoverflow.com/questions/18912744/drag-drop-an-object-into-google-maps-from-outside-the-map-marker-not- डाल-पर/18913950 # 18913950 –

संबंधित मुद्दे