如何將「DIV」元素拖動到谷歌地圖，這被改爲「標記」 ..使用jQuery

這是我的代碼：如何將「DIV」元素拖動到谷歌地圖，這被改爲「標記」 ..使用jQuery

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

來源

2010-03-11 zjm1126

有幾件事情你需要做的就是此工作：

在您的可拖動元素上設置zIndex，使其顯示在地圖上方。
在您的元素上設置恢復標誌，使其不會落在地圖下方。
爲停止事件添加處理程序，以便用戶在地圖上放置元素時執行一些代碼。
從地圖元素內的偏移量映射到距離地圖邊界左上角的緯度經度偏移量。

我有implemented a sample根據您的code，這三個點的前三個。要做最後一步，您需要查詢對象以確定當前視圖，然後執行映射。如果你對這部分有問題，請在這裏發帖，當我有一些時間時，我會用這個功能更新我的答案。

$("#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-12 00:31:29 RedBlueThing

如何將「DIV」元素拖動到谷歌地圖，這被改爲「標記」 ..使用jQuery

回答

相關問題