圖片拖動到百度地圖上
阿新 • • 發佈：2019-01-12
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> #allmap {width: 100%;height: 400px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙"></script> <title></title> </head> <body> <div id="allmap"></div> <div> <img class="imgMarker" data-drop=true src="http://demo.sc.chinaz.com/Files/pic/icons/5658/12.png" width="50px"/> <img class="imgMarker" data-drop=true src="http://demo.sc.chinaz.com/Files/pic/icons/5658/0.png" width="50px"/> </div> </body> </html> <script type="text/javascript"> // var map = new BMap.Map("allmap"); var point = new BMap.Point(116.404, 39.915); map.centerAndZoom(point, 15); var pt=""; var marker2 =""; map.addEventListener("click",function(e){ map.removeEventListener("mousemove", markerMove); }); function markerOver(e){ pt=new BMap.Point(116.404, 39.915); marker2 = new BMap.Marker(pt,{icon:myIcon}); map.addOverlay(marker2); map.addEventListener("mousemove",markerMove); } function markerMove(e){ marker2.setPosition(e.point); } var imgElems=document.getElementsByTagName("img"); for(var i=0;i<imgElems.length;i++){ imgElems[i].onmousedown=imgMouseDown; function imgMouseDown(e){ if(e.target.dataset.drop=="true"){ var myIcon=new BMap.Icon(e.currentTarget.currentSrc,new BMap.Size(45,45)); pt=new BMap.Point(0, 0); marker2 = new BMap.Marker(pt,{icon:myIcon}); map.addOverlay(marker2); map.addEventListener("mousemove",markerMove); e.target.dataset.drop=false; e.preventDefault(); } return false; } } </script>
歡迎大家指正其中的不足，幫忙改正