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

地理定位：使用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>

//创建地图实例

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>

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

猜你喜欢