<!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>
欢迎大家指正其中的不足，帮忙改正