5
निम्नलिखित कोड नमूना मुझे परेशान कर रहा है। यह कोड के एक बड़े टुकड़े का सबसे सरल संस्करण है जिसका उपयोग मैं अपनी समस्या का प्रदर्शन करने के लिए कर सकता हूं। असल में मैं चाहता हूं कि उपयोगकर्ता माउस कुंजी को दबाकर और खींचकर एक बाउंडिंग बॉक्स खींच सके।माउसमैप्स माउसअप इवेंट खो देता है अगर माउस में आयताकार आयत
यदि मैं माउसमोव फ़ंक्शन में सेटबाउंड का उपयोग करके आयत को फिर से चलाता हूं, तो मुझे माउसअप ईवेंट कभी नहीं दिखाई देता है! यदि मैं माउसमोव फ़ंक्शन में आयताकार को पुनः हटाने को अक्षम करता हूं, तो मुझे माउसअप ईवेंट मिलता है। मैं माउसअप इवेंट में आयताकार ड्राइंग करके आंशिक रूप से इस पर काम कर सकता हूं, लेकिन फिर उपयोगकर्ता बॉक्स की रेखा खींचने के रूप में रूपरेखा नहीं देख सकता है।
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#mapdiv { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map, mouseDownPos, gribBoundingBox = "", mouseIsDown = 0;
function display_map()
{
var latlng = new google.maps.LatLng(42, -71);
var myOptions = {zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("mapdiv"), myOptions);
google.maps.event.addListener(map,'mousemove',function(event) {mouseMove(event);});
google.maps.event.addListener(map,'mousedown',function(event) {mouseDown(event);});
google.maps.event.addListener(map,'mouseup',function(event) {mouseUp(event);});
}
function mouseMove(event)
{
if (mouseIsDown)
{
if (gribBoundingBox) // box exists
{
var bounds = new google.maps.LatLngBounds(gribBoundingBox.getBounds().getSouthWest(), event.latLng);
gribBoundingBox.setBounds(bounds); // If this statement is enabled, I lose mouseUp events
}
else // create bounding box
{
var bounds = new google.maps.LatLngBounds(mouseDownPos, event.latLng);
gribBoundingBox = new google.maps.Rectangle({map: map, bounds: bounds, fillOpacity: 0.05, strokeWeight: 1});
}
}
}
function mouseDown(event)
{
mouseIsDown = 1;
mouseDownPos = event.latLng;
map.setOptions({draggable: false});
}
function mouseUp(event)
{
if (mouseIsDown)
{
mouseIsDown = 0;
map.setOptions({draggable: true});
// var bounds = new google.maps.LatLngBounds(mouseDownPos, event.latLng);
// gribBoundingBox.setBounds(bounds); // If used instead of above, box drawn properly
gribBoundingBox.setEditable(true);
}
}
</script>
</head>
<body onload="display_map()">
<div id="mapdiv" style="width:100%; height:100%"></div>
</body>
</html>
Tomik, आप इस उत्तर के लिए बहुत बहुत धन्यवाद। यह ठीक काम करता है और मैंने कभी आपकी अंतर्दृष्टि के बिना यह नहीं सोचा होगा। समाधान 1 पूरी तरह से काम किया। – GeoffSchultz