1. 程式人生 > >圖片拖動到百度地圖上

圖片拖動到百度地圖上

<!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>

歡迎大家指正其中的不足,幫忙改正