<!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>
这个比上一个好用。