views:

261

answers:

1

this is my code :

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    </head>
<body onload="initialize()" onunload="GUnload()">

<style type="text/css">

</style>
<div id="map_canvas" style="width: 500px; height: 300px;float:left;"></div>
<div id=b style="width: 50px; height: 50px;background:red;float:left;margin-left:300px;"></div>

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script>
<script src="http://ditu.google.cn/maps?file=api&amp;amp;v=2&amp;amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&amp;sensor=false"type="text/javascript"&gt;&lt;/script&gt;

<script type="text/javascript">

//**********
function initialize() {
      if (GBrowserIsCompatible()) {
        //
                function createMarker(point, number) {
                var marker = new GMarker(point);
                var message = ["这","是","个","秘密","消息"];
                marker.value = number;
                GEvent.addListener(marker, "click", function() {
                var myHtml = "<b>#" + number + "</b><br/>" + message[number -1];
                map.openInfoWindowHtml(point, myHtml);
                });
                return marker;
}
//

        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.9493, 116.3975), 13);

// Add 5 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
    southWest.lng() + lngSpan * Math.random());
  map.addOverlay(createMarker(point, i + 1));
}
      }
}
//*************

$("#b").draggable();
</script>
</body>
</html>
+1  A: 

There a few things you need to do to get this working:

  • Set the zIndex on your draggable element so that it shows up above the map.
  • Set the revert flag on your element so it doesn't drop under the map.
  • Add a handler for the stop event, so you can execute some code when the user drops the element on your map.
  • Map from the offset inside the map element to a latitude longitude offset from the top left corner of your map bounds.

I have implemented a sample based on your code that does the first three of these points. To do the last you will need to query the GMap2 object to determine the current view and then do the mapping. If you have problems with this part, please post here and when I get some time I will update my answer with that functionality.

    $("#b").draggable({
        zIndex: 2700,
        revert: true,
        revertDuration: 0,
        stop: function(event, ui) 
        {
            var dragOffset = ui.offset;
            var mapOffset = $(".map").offset();
            if (dragOffset.top > mapOffset.top && 
                dragOffset.left > mapOffset.left &&
                dragOffset.top < (mapOffset.top + $(".map").outerHeight()) &&
                dragOffset.left < (mapOffset.left + $(".map").outerWidth ()))
            {
                // top left corner is inside the map div (you can finess this "inside map" check)
                // add a marker at a random offset.
                // you will need to do some additional work to map
                // the page offset to lat/lng offset from the corner of the map
                var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                southWest.lng() + lngSpan * Math.random());
                map.addOverlay(createMarker(point, i + 1));
            }
        }
    });
Cannonade