как перетащить элемент «div» на карты Google, который будет заменен на «маркер» .. использовать jquery - PullRequest
Новая
       11

как перетащить элемент «div» на карты Google, который будет заменен на «маркер» .. использовать jquery

1 голос
/ 11 марта 2010

это мой код: 

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

1 Ответ

1 голос
/ 12 марта 2010

Есть несколько вещей, которые нужно сделать, чтобы это заработало:

  • Установите zIndex на перетаскиваемом элементе, чтобы он отображался над картой.
  • Установите флаг возврата на свой элемент, чтобы он не упал под карту.
  • Добавьте обработчик для события stop, чтобы вы могли выполнить некоторый код, когда пользователь удалит элемент на вашей карте.
  • Карта от смещения внутри элемента карты до смещения долготы и широты от верхнего левого угла границ вашей карты.

Я реализовал пример на основе вашего кода , который выполняет первые три из этих пунктов. Чтобы выполнить последнее, вам нужно запросить объект 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));
            }
        }
    });
...