图片拖动到百度地图上2

<!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>
这个比上一个好用。
图片拖动到百度地图上2

猜你喜欢
