HTML5新API—地理位置信息

在我们日常的生活中，利用HTML5新API—地理位置信息功能相关软件越来越多。例如：陌陌 滴滴 饿了么 美团 去哪儿等等。下面我们将一起了解下。

Geolocation API 的基本知识

如果浏览器支持，且设备有定位功能，就可以直接使用这组API来获取当前位置信息。不过需要注意的是：PC端是通过ip地址进行定位，但由于VPN的存在所以这样党委并不靠谱，还有就是geolocation是基于谷歌地图进行定位，所以你懂的...；移动设备（手机端）是通过GPS定位所以较为准确。
我们要使用次功能时需要判断下浏览器是否支持：

if(navigator.geolocation){ 
    alert('此设备支持地理定位功能！');
}else{   
   alert('暂不支持地理定位功能！');
}

获取当前地理位置

navigator.geolocation.getCurrentPosition(fnSuccess,fnFail);

只是获取一次位置信息。
其中第一个参数为成功获取地理位置后所执行的回调函数，第二个参数为获取位置失败后所执行的函数。
当获取位置成功后，会有一个事件对象，里面会有我们将会用到的数据。
ev.coords.longitude 经度
ev.coords.latitude 纬度
ev.coords.altitude 海拔
ev.coords.heading 方向（用面向正北方向的顺时针旋转角度来表示）
ev.coords.speed 速度
ev.coords.altitudeAccuracy 高度的准确性
当获取位置失败后，也会有一个事件对象，里面存着相关状态码和失败信息。
ev.code 错误代码
0 未知错误
1 用户拒绝（当弹出框时用户拒绝了）
2 超时（获取地理位置超时）
ev.message 错误信息

navigator.geolocation.watchPosition(fnSuccess,fnFail);

监视位置变化，频繁的去监视(若位置改变就触发，不是按照时间监视的)。

停止获取当前用户的地理位置信息

navigator.geolocation.clearWatch(需要停止的名);

var timer = null;
oBtn1.onclick = function (){   
     if(navigator.geolocation){    
          timer = navigator.geolocation.watchPosition(function(ev){   
                         console.log(ev.coords);      
                     },function(ev){  
                        console.log('错误状态码'+ev.code+'错误信息'+ev.message);     
                     });    
      } else {        
          console('不支持geoLocation');   
       }};
oBtn2.onclick = function () {    
      navigator.geolocation.clearWatch(timer);
};

在页面上使用百度地图

1.在HTML页面创建一个box用来展示地图

<div id="box"></div>

我们给box一些简单的样式：

  #box{   
       width: 400px;height: 200px;  
       background-color: #ccc;  
       border: 1px solid #666;
}

2.在页面中导入百度地图 API的脚本文件

  <script type="text/javascript" 

3.创建地图对象，设置坐标（这里我们先定死一个位置），设定放大倍数（一般数值15即可）

var map = new BMap.Map("box");
//设置坐标
var oPointer = new BMap.Point(116.404,39.915);
//缩放级别，一般的15
map.centerAndZoom(oPointer,15);

这样我们就简单的在页面中引入一个百度地图脚本了，如下：

4.进行一些地图的其他配置

//设置标记点
var marker = new BMap.Marker(oPointer);
map.addOverlay(marker);
 //开启鼠标滚轮缩放功能
map.enableScrollWheelZoom(true);    
//标记点跳动的动画
marker.setAnimation(BMAP_ANIMATION_BOUNCE); 

5.周边搜索

这里我们假设搜索银行

var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});local.searchNearby('银行',oPointer,1000);

关于百度地图的一些基础功能，我们先了解这些。接下来我们来实现一个建议的动态搜索周边生活服务信息。

当我们输入一个内容，点击搜索按钮后，地图上提示我们相关信息。
首先我们来看下布局：

<div id="box"></div>
<input type="text" placeholder="请输入搜索内容" id="txt" />
<input type="button" value="搜索" id="btn">

我们在简单的设置下样式

#box{    
  width: 400px;height: 200px;
   background-color: #ccc;  
   border: 1px solid #666;   
   margin-bottom: 20px;
}

接下里我们来写我们的重头戏js代码

//获取页面内相关元素
var oT = document.getElementById('txt');
var oBtn = document.getElementById('btn');
//创建一个地图实例
var map = new BMap.Map("box");
//定义一个变量，方便我们以后在点击搜索按钮后设置坐标
var oPointer = null;
oBtn.onclick = function () {  
    if(navigator.geolocation){        
            //设置监听事件，当我们的地理位置发生变化后，触发并获取事件信息
            navigator.geolocation.watchPosition(function(ev){  
                  //将我们获取到的经度与纬度，存入变量    
                  var longitude = ev.coords.longitude;      
                  var latitude = ev.coords.latitude;         
                  //传入我们的经纬坐标
                  oPointer = new BMap.Point(longitude,latitude);    
                  //设置缩放比例
                  map.centerAndZoom(oPointer,15);
                  //在地图上显示坐标点
                  var marker = new BMap.Marker(oPointer);            
                  map.addOverlay(marker);           
                   var local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});        
                   //将我们输入框的内容传入
                  local.searchNearby(oT.value,oPointer,1000);  
            },function(ev){       
                 alert('错误状态码'+ev.code+'错误信息+ev.message);     
             });   
   } else {   
      alert('您的设备不支持H5地理定位功能！');
    }
};

效果如下：

百度地图还提供了相关更多的功能，看具体需求，这里就不在依次展会效果了。