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

96
我是渐渐呀
2016.12.19 20:51* 字数 407

一、百度地图

百度地图开放平台: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 - 当鼠标离开目标元素时触发

web前端学习笔记