HTML5--关于Geolocalition(地理定位)

 * Geolocation(地理定位)

   * 基本内容

     * 地理定位 - 地球的经度和纬度的相交点

     * 实现地理定位的方式

       * GPS - 美国的,依靠卫星定位

       * 北斗定位 - 纯国产,惯性定位技术和卫星定位

       * 基站定位 - 移动运营商创建基站(提供信号源)

       * 基于互联网 - IP地址(PC端和移动端)

       * 目前很多浏览器都具有定位功能

   * HTML5中地理定位

     * 地理定位功能并不是属于HTML5专有内容

       * HTML5的地理定位技术,由Google公司提供的

       * Google Map产品

     * 中国 - 国内不能使用Google公司所有服务和产品

       * 百度地图和高德地图

   * 百度地图

     * 百度地图 - http://developer.baidu.com/map/

     * 注册百度开发者账户

       * http://developer.baidu.com/

     * 条件 - 必须能连接互联网

     * 目的 - 掌握如何使用百度地图

   * JS库或百度地图

     * 提供的API帮助文档

     * 提供的Demo示例代码

   * 学习目的

     * 学习的百度地图的功能

     * 百度地图的使用特点

   * 如何使用百度地图

     * 在HTML页面中

       * 引入百度地图的JS

         http://api.map.baidu.com/api?v=2.0&ak=秘钥

       * 定义显示地图的容器

         <div id="" style=""></div>

     * 在javascript代码中

       * 创建百度地图Map对象

         var map = new BMap.Map(容器id);

       * 进行地图的初始化

         map.centerAndZoom();

   * 百度地图的组件

     * 核心类 - Map类

       * 构造器 - BMap.Map(容器id);

       * 方法

         * centerAndZoom() - 初始化方法

        * addControl() - 添加控件

        * addOverlay() - 添加标注

     * Control类 - 控件类

       * ScaleControl类 - 表示地图的比例尺

         * 构造器 - 创建比例尺对象

       * NavigationControl类 - 表示移动缩放控件

         * 构造器 - 创建移动缩放控件

     * Overlay类 - 遮盖物类

       * Marker类 - 表示地图的一个标注

         * 构造器 - Marker(point)

     * Point类 - 标注类

 * 拖放(拖拽)API

   * 实现拖拽效果

     * 要拖拽的文件是什么? - 源元素

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

   * 目前实现拖拽效果

     * 使用原生DOM就能实现 - 最麻烦

     * 使用jQuery的插件 - 拖拽效果

     * HTML5中提供的拖拽功能

   * HTML5中拖拽

     * 源元素事件

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

       * drag - 当鼠标拖放过程中,类似于mousemove事件

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

     * 目标元素事件

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

       * dragover - 当鼠标到达目前元素被触发

         * 为该事件增加event.preventDefault();

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

         * 默认情况下,该事件没有被触发

          * 原因 - HTML页面默认情况下,不允许拖放

            * 称之为HTML页面的默认行为

          * 解决 - 阻止页面的默认行为

            * 事件对象event.preventDefault()方法

       * dragleave - 当鼠标拖放离开目标元素被触发

     * dataTransfer对象

       * 作用 - 类似于window系统的剪切板的功能

       * 功能

         * 可以将源元素的信息(数据),存储在这里

        * 将存储在该对象的源元素信息,提供给目标元素

       * 方法

         * setData() - 设置(源元素)数据

          * 在源元素事件中使用

        * getData() - 获取设置的数据

          * 在目标元素事件中使用

        * clearData() - 清除(设置的)数据

          * 所有的数据内容,存储在浏览器内存中

          * 当使用完毕数据内容时,清除

     * setDragImage()方法

       * 作用 - 修改拖放过程中,鼠标跟随的图片效果

       * 用法 - drag、dragstart等事件

       * 注意 - 实际操作中,该方法几乎不用

 * 扩展内容

   * 建立自己的技术博客

     * 作用

       * 归纳学习技术知识和经验总结等

       * 帮助检查技术专业性或是否存在错误

       * 技术博客提供与别人交流平台

       * 面试时,公司会问是否拥有技术博客

     * 技术博客网站

       * CSDN - 技术圈知名度最大的

         http://blog.csdn.net/

       * 博客园 - 老牌的技术博客

         http://www.cnblogs.com/

       * iteye - 专注于技术博客

         http://www.iteye.com/blogs

       * 开发社区

         http://segmentfault.com/

   * 将作品放在网上可以访问(Web前端)

     * hexo - 使用nodejs编写的静态博客程序

       * 地址:https://hexo.io/

     * 搭建博客网站

       * github

         https://pages.github.com/

       * gitcafe

         https://gitcafe.com/

     * git软件的使用