百度地图的javascript API的使用和网页里的拖拽事件

一、百度地图

百度地图开放平台：http://developer.baidu.com/map/

百度地图javascript API文档：http://lbsyun.baidu.com/index.php?title=jspopular

在百度地图开放平台上创建应用，会得到一个key，用这个密钥就能使用百度地图的api了

脚本导入，这里要填上申请到的密钥

// 百度地图API功能

var map = new BMap.Map("allmap"); // 创建Map实例

map.centerAndZoom("福鼎", 11); // 初始化地图,设置中心点坐标和地图级别

// map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

按照文档上的描述，简单几行代码就能让网页显示出地图

百度地图demo地址：http://lbsyun.baidu.com/jsdemo.htm

二、拖拽

1、要实现拖拽的效果，必须要确定

源目标-要拖拽元素或文件

目标元素-要拖拽到哪里去

2、拖拽事件

源元素事件：

         dragStart - 当鼠标开始拖放时被触发

         drag - 当鼠标拖放过程中被触发

         dragend 当鼠标拖放结束时被触发

目标元素事件：

        dragover - 当鼠标到达目标元素被触发，会反复触发

        dragenter - 当鼠标拖放进入到目标元素内触发

        drop - 当鼠标实现拖放效果时被触发

问题：HTML页面默认不允许拖放，称之为HTML页面的默认行为

解决：在dragover的事件中组织默认行为即可event.preventDefault();

dragleave - 当鼠标离开目标元素时触发