分享

重温---HTML5高级---地理定位

 印度阿三17 2018-10-11

地理定位:使用JS获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务),具体数据包括:

      经度:longitude

      纬度:latitude

      海拔:altitude

      速度:speed

 技术上如何获取浏览器所在的定位信息:

 (1)手机中的浏览器

       靠手机内置的GPS芯片数据,精度在“米”级

       靠手机与之通讯基站数据,精度在“公里”级

 (2)PC中的浏览器

       靠IP地址反向解析,精度在“公里”级

 HTML5新增了用于获取浏览器所在定位的对象:

  window.navigator.geolocation {

       getCurrentPosition: fn  用于获取当前定位信息

       watchPosition: fn  不停的监视定位信息的改变

       clearWatch: fn 清除监视

  }

  ------------------------------------

  navigator.geolocation.getCurrentPosition(

       funcntion(pos){

              console.log('定位成功');

       }, function(err){

              console.log('定位失败');

       }

  )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <button id="btn">获取当前浏览器所在的定位信息</button>
  <script>
    btn.onclick=function () {
      window.navigator.geolocation.getCurrentPosition(succCB,errCB);
    }
    function succCB(pos) {
      console.log('成功获取定位信息');
      console.log('定位时间:' pos.timestamp);
      console.log('经度:' pos.coords.longitude);
      console.log('纬度:' pos.coords.latitude);
      console.log('海拔:' pos.coords.altitude);
      console.log('速度:' pos.coords.speed);
    }
    function errCB(err) {
      console.log('获取定位信息失败');
      console.log('错误编号:' err.code);
      console.log('错误消息:' err.message);
    }
  </script>
</body>
</html>

如何在页面中使用百度地图 —— 扩展小知识

  从map.baidu.com下点击“地图开放平台”:

  目前官网:  http://lbsyun.baidu.com/

  JS-API使用手册:  http://lbsyun.baidu.com/index.php?title=jspopular

  第三方工具的学习步骤:

  (1)打开官网,找定义,功能说明

http://lbsyun.baidu.com/

       可以基于百度地图进行Android、iOS、Web应用开发

http://lbsyun.baidu.com/index.php?title=jspopular

  (2)找示例程序

       

  (3)找API文档,编写自己的应用

使用百度地图API步骤:

(1)注册百度开发者账号

(2)使用开发者账号申请创建一个Web应用账号,获取一个访问百度地图的密钥(AccessKey)

http://lbsyun.baidu.com/apiconsole/key

       

(3)编写HTML网页,出示当前网站的访问密钥,调用百度地图API

  <script src="http://api.map.baidu.com/api?v=2.0&ak=您的网站在百度地图申请的访问秘钥 ">

  </script>

  //创建地图实例   

  var map = new BMap.Map("container");

  //创建一个指定的点 —— 文博大厦

  var p = new BMap.Point(116.300982,39.915907);

  //以指定点为中心显示地图

  map.centerAndZoom(p, 17);

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Hello, World</title>
  <style>
    body{
      height:100%;
      margin:0px;
      padding:0px
    }
    #container{
      width:800px;
      height:500px;
    }
  </style>
  <script src="http://api.map.baidu.com/api?v=3.0&ak=UasTkGnlX3NAKiS675ux8OCIrTP6AFDc">
    //v3.0版本的引用方式:src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
  </script>
</head>

<body>
  <h3>在自己的网页中使用百度地图</h3>
  <div id="container"></div>
<script>
  // 创建地图实例
  var map = new BMap.Map("container");
  // 创建点坐标
  var point = new BMap.Point(116.060038,39.507595);
  // 初始化地图,设置中心点坐标和地图级别
  map.centerAndZoom(point, 15);

  //添加地图控件
  map.addControl(new BMap.NavigationControl());
  map.addControl(new BMap.ScaleControl());
  map.addControl(new BMap.OverviewMapControl());
  map.addControl(new BMap.MapTypeControl());
  map.enableScrollWheelZoom(true);

  //添加地图上的覆盖物件 overlay
  //添加标记
  // var marker=new BMap.Marker(point);
  // //跳动的动画
  // marker.setAnimation(BMAP_ANIMATION_BOUNCE);
  // map.addOverlay(marker);

  var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
  var marker2 = new BMap.Marker(point,{icon:myIcon});  // 创建标注
  marker2.setAnimation(BMAP_ANIMATION_BOUNCE);
  map.addOverlay(marker2);              // 将标注添加到地图中

  //添加一个说明窗口
  var param={
    width:100,
    height:30,
    title:'涿州物探局科技园区'
  };
  var win=new BMap.InfoWindow('地址:华阳东路',param);
  map.openInfoWindow(win,point);

</script>
</body>
</html>

 

来源:http://www./content-4-47401.html

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多