圖片拖動到百度地圖上2
阿新 • • 發佈：2019-01-12
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> </head> <style> /*第一步 初始化瀏覽器預設的樣式*/ body,ol,ul,h1,i,h2,h3,h4,h5,h6,p,table,th,td,dl,dd,form,img,div,span,fieldset,legend,input,textarea,select{ margin:0; padding:0; font-size: 14px; } ul li { list-style: none; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; } #wrap { width: 900px; margin: 40px auto; } #wrap .wrap-img { width: 400px; height: 400px; border: 1px solid #ddd; float: left; overflow: auto; position: relative; } .wrap-img .bgc-img { width: 800px; height: 800px; position: relative; } #wrap .img-list { width: 400px; float: left; margin-left: 24px; } #wrap .img-list ul { height: 400px; overflow-y: auto; } #wrap .img-list ul li img { width: 50px; height: 50px; } </style> <!-- 百度地圖 --> <script src="js/jquery.js"></script> <script src="http://api.map.baidu.com/api?v=2.0&ak=AhMbU3tHYzarhIPiZWjktLvHNNOOXCZR"></script> <body> <div id="wrap" class="clearfix"> <div class="wrap-img"> <div class="bgc-img clearfix" id="myImage" ondrop="drop(event)" ondragover="dragOverHandle(event)"> </div> </div> <div class="img-list"> <ul> <li><img id="img1" draggable="true" data-drop="false" ondragend="dragEndHandler(event)" src="http://demo.sc.chinaz.com/Files/pic/icons/5658/12.png" data-serial="1" alt=""></li> <li><img id="img2" draggable="true" data-drop="false" ondragend="dragEndHandler(event)" src="http://demo.sc.chinaz.com/Files/pic/icons/5658/0.png" data-serial="2" alt=""></li> <li><img id="img3" draggable="true" data-drop="false" ondragend="dragEndHandler(event)" src="http://demo.sc.chinaz.com/Files/pic/icons/5658/12.png" data-serial="3" alt=""></li> <li><img id="img4" draggable="true" data-drop="false" ondragend="dragEndHandler(event)" src="http://demo.sc.chinaz.com/Files/pic/icons/5658/0.png" data-serial="4" alt=""></li> <li><img id="img5" draggable="true" data-drop="false" ondragend="dragEndHandler(event)" src="http://demo.sc.chinaz.com/Files/pic/icons/5658/12.png" data-serial="5" alt=""></li> <li><img id="img6" draggable="true" data-drop="false" ondragend="dragEndHandler(event)" src="http://demo.sc.chinaz.com/Files/pic/icons/5658/0.png" data-serial="6" alt=""></li> </ul> </div> </div> </body> <script> var clickClassImgListDom = ''//當前拖動的圖片 var map=new BMap.Map("myImage",{ enableMapClick: false }); map.centerAndZoom(new BMap.Point(116.404, 39.915), 9); map.enableScrollWheelZoom(); // 拖動元素在 [目標元素-也就是承載元素的元素]中時觸發的該事件, 事件物件為目標元素。 function dragOverHandle(e){ if(clickClassImgListDom.dataset.drop=="true"){ return; } e.preventDefault(); } // 拖動元素在放手以後觸發的事件, 事件物件為拖動的元素。 function dragEndHandler(e){ if(e.target.dataset.drop == 'true'){ return; } } // 百度地圖所在DIV上放開滑鼠時 function drop(e) { map.addEventListener('mousemove', myFunction) } //利用mousemove獲取當前經緯度 function myFunction(event){ var icon=clickClassImgListDom.src; clickClassImgListDom.dataset.drop=true; var marker=new BMap.Marker(event.point,{icon:new BMap.Icon(icon,new BMap.Size(50,50))}); map.addOverlay(marker); marker.enableDragging(); marker.addEventListener("dragend", function (e) { //聽標註的dragend事件，獲取拖拽後地理座標 //可拖拽，這裡獲取經緯度 }); map.removeEventListener('mousemove', myFunction); } $('.img-list').delegate('img', 'mousedown', function(e){ clickClassImgListDom = e.target; }) </script> </html>
這個比上一個好用。