1

这是我的代码：

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<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;v=2&amp;key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script>

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

1 回答 1

1

您需要做一些事情才能使其正常工作：

  • 在您的可拖动元素上设置 zIndex，使其显示在地图上方。
  • 在您的元素上设置 revert 标志，使其不会落在地图下方。
  • 为停止事件添加一个处理程序，以便在用户将元素放在地图上时执行一些代码。
  • 从地图元素内的偏移量映射到地图边界左上角的纬度经度偏移量。

我已经根据您的代码实现了一个示例，它完成了前三点。最后，您需要查询GMap2对象以确定当前视图，然后进行映射。如果您对此部分有疑问，请在此处发布，当我有时间时，我将使用该功能更新我的答案。

    $("#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));
            }
        }
    });
于 2010-03-12T00:31:29.417 回答