<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="viewport" content="initial"
<meta name="Author" content="initial-scale=1.0,user-scalable=no">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
//創(chuàng)建一個(gè)地圖實(shí)例，參數(shù)可以是元素id也可以是元素對(duì)象，其中BMap是百度地圖API里面的命名空間
var map=new BMap.Map("container");
var point=new BMap.Point(116.404,39.915);//創(chuàng)建一個(gè)坐標(biāo)點(diǎn)，其中116表示經(jīng)度，39表示緯度
//創(chuàng)建地圖實(shí)例后，必須對(duì)其進(jìn)行初始化，初始化后才能進(jìn)行其它的操作，該方法設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
map.centerAndZoom(point,15);
//啟用輪滾進(jìn)行放大縮小，默認(rèn)為禁用
map.enableScrollWheelZoom();
//向地圖添加控件
map.addControl(new BMap.NavigationControl());//平移縮放控件，默認(rèn)在地圖左上方
map.addControl(new BMap.ScaleControl());//比例尺控件，默認(rèn)在地圖左下方
map.addControl(new BMap.OverviewMapControl());//縮略圖控件，默認(rèn)在地圖右下方
//控制控件的位置,anchor:表示停靠在地圖的哪個(gè)腳，offset指定偏移量，離地圖邊界相隔多少像素
var opts={anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new BMap.Size(10,10)};
map.addControl(new BMap.NavigationControl(opts));
//用戶自定義控件需要通過JS中的prototype屬性繼承BMap.Control
//地圖覆蓋物(標(biāo)注、矢量圖形元素和信息窗口等)
var marker=new BMap.Marker(point); //創(chuàng)建標(biāo)注
map.addOverlay(marker);//將標(biāo)注添加到地圖中
marker.enableDragging();//表示標(biāo)注可拖拽，默認(rèn)不可
// 監(jiān)聽標(biāo)注點(diǎn)擊事件
marker.addEventListener("click",function(){
alert("你點(diǎn)擊了標(biāo)注");
});
//監(jiān)聽標(biāo)注拖拽位置事件
marker.addEventListener("dragend",function(e){
alert("當(dāng)前位置:"+e.point.lng+","+e.point.lat);//表示經(jīng)緯度
});
var opts2={width:250,height:100,title:"hello"};//信息窗口
var infoWindow=new BMap.InfoWindow("world",opts2);//創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow,map.getCenter());//打開信息窗口
var tilelayer=new BMap.TileLayer();//創(chuàng)建地圖層實(shí)例
tilelayer.getTilesUrl=function(){//設(shè)置圖塊路徑
return "layer.gif";
};
map.addTileLayer(tilelayer);//將圖層添加到地圖上
//var myPushpin=new BMap.PushpinTool(map);//創(chuàng)建標(biāo)注工具實(shí)例
//myPushpin.addEventListener("markend",function(e){
// alert("你標(biāo)注的位置："+e.marker.getPoint().lng+","+e.marker.getPoint().lat);
//});
// myPushpin.open();//開啟標(biāo)注工具
//創(chuàng)建搜索實(shí)例，并將結(jié)果展現(xiàn)在地圖實(shí)例上
var local=new BMap.LocalSearch(map,{
renderOptions:{map:map,panel:"results"}//搜索結(jié)果自動(dòng)添加到搜索結(jié)果列表容器中
});
local.search("XXXX");//搜索xxx
//下面是對(duì)地圖的一些操作，等待兩秒鐘后，它會(huì)移動(dòng)到新的中心點(diǎn)
// window.setTimeout(function(){
//map.panTo(new BMap.Point(116.409,39.918));
// },2000);
</script>
</body>
</html>
拖拽API
1. 實(shí)現(xiàn)拖拽效果
源元素 - 要拖拽的文件
目標(biāo)元素 - 要拖拽到哪里去
2. 目前實(shí)現(xiàn)拖拽效果
使用原生DOM就能實(shí)現(xiàn) - 最麻煩
使用jQuery的插件
HTML5種提供的拖拽功能
3. HTML5拖拽
1）源元素事件
dragStart - 當(dāng)鼠標(biāo)開始拖放時(shí)被觸發(fā)
drag - 當(dāng)鼠標(biāo)拖放過程中被觸發(fā)
dragend 當(dāng)鼠標(biāo)拖放結(jié)束時(shí)被觸發(fā)
2）目標(biāo)元素事件
dragover - 當(dāng)鼠標(biāo)到達(dá)目標(biāo)元素被觸發(fā)，會(huì)反復(fù)觸發(fā)
dragenter - 當(dāng)鼠標(biāo)拖放進(jìn)入到目標(biāo)元素內(nèi)觸發(fā)
drop - 當(dāng)鼠標(biāo)實(shí)現(xiàn)拖放效果時(shí)被觸發(fā)
問題：HTML頁(yè)面默認(rèn)不允許拖放，稱之為HTML頁(yè)面的默認(rèn)行為
解決：在dragover的事件中組織默認(rèn)行為即可event.preventDefault();
dragleave - 當(dāng)鼠標(biāo)離開目標(biāo)元素時(shí)觸發(fā)
3）dataTransfer對(duì)象
作用：類似于window系統(tǒng)的剪切板功能
功能：可以將源元素的信息，存儲(chǔ)在這里，提供給目標(biāo)元素
使用：
使用事件對(duì)象獲取到dataTransfer對(duì)象
var trans = event.dataTransfer;
設(shè)置數(shù)據(jù)
setData(type,data)方法
type:類型，特指標(biāo)識(shí)(id)，一般為字符串
data:設(shè)置的數(shù)據(jù)內(nèi)容
獲取數(shù)據(jù)
getData(type);
清除數(shù)據(jù)
clearData(type)
所有的數(shù)據(jù)內(nèi)容，存儲(chǔ)在瀏覽器內(nèi)存中，當(dāng)使用完數(shù)據(jù)內(nèi)容時(shí)，要清除
事件對(duì)象 - 作為事件處理函數(shù)的參數(shù)存在
DOM底層代碼的默認(rèn)寫法就是event,如果直接使用event就可以不穿event參數(shù)，這種寫法不標(biāo)準(zhǔn)
4）從本地拖拽文件到頁(yè)面中
var transfer = event.dataTransfer;
//找到拖拽的文件
var file = transfer.files[0];
//新建文件讀取對(duì)象
var reader = new FileReader();
//讀取文件
reader.readAsDataURL(file);
//讀取完以后加載
reader.onload = function(){
d1.innerHTML = "<img src"+reader.result+">";
}
4）setDragImage()
作用：修改拖放過程中，鼠標(biāo)跟隨的圖片效果
用法：drag/dragstart等事件