HTML5技术

H5小内容(五) - 月落天羽

字号+ 作者:H5之家 来源:博客园 2016-02-01 10:00 我要评论( )

Geolocation(地理定位) 基本内容 地理定位 - 地球的经度和纬度的相交点 实现地理定位的方式 GPS - 美国的,依靠卫星定位 北斗定位 - 纯国产,惯性定位技术和卫星定位 基站定位 - 移动运营商创建基站(提供信号源) 基于互联网 - IP地址(PC端和移动端) 目前很多浏

 Geolocation(地理定位)
   基本内容
     地理定位 - 地球的经度和纬度的相交点
     实现地理定位的方式
       GPS - 美国的,依靠卫星定位
       北斗定位 - 纯国产,惯性定位技术和卫星定位
       基站定位 - 移动运营商创建基站(提供信号源)
       基于互联网 - IP地址(PC端和移动端)
       目前很多浏览器都具有定位功能
   HTML5中地理定位
     地理定位功能并不是属于HTML5专有内容
       HTML5的地理定位技术,由Google公司提供的
       Google Map产品
     中国 - 国内不能使用Google公司所有服务和产品
       百度地图和高德地图
   百度地图
     百度地图 -
     注册百度开发者账户
      
     条件 - 必须能连接互联网
     目的 - 掌握如何使用百度地图
   JS库或百度地图
     提供的API帮助文档
     提供的Demo示例代码
   学习目的
     学习的百度地图的功能
     百度地图的使用特点
   如何使用百度地图
     在HTML页面中
       引入百度地图的JS
         ?v=2.0&ak=秘钥
       定义显示地图的容器
         <div></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等事件
       注意 - 实际操作中,该方法几乎不用

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 聊聊这几个星期的面试感受吧,内容太长。。慢慢更新吧 - 秦随境迁

    聊聊这几个星期的面试感受吧,内容太长。。慢慢更新吧 - 秦随境迁

    2017-04-13 13:03

  • 手机端H5点击类目自动定位到相应内容 - wangwht

    手机端H5点击类目自动定位到相应内容 - wangwht

    2017-01-10 14:00

  • js复制内容加版权声明代码 - QQ资源吧

    js复制内容加版权声明代码 - QQ资源吧

    2016-08-11 15:00

  • HTLM5第一天的内容 - 怼烎丨

    HTLM5第一天的内容 - 怼烎丨

    2016-08-03 13:00

网友点评