HTML5地理位置Geolocation以及百度地图应用

什么是地理位置？

简单说说主要由经度和纬度确定一个地理位置（经度 : 南北极的连接线
纬度 : 东西连接的线）

注意：浏览器默认不共享地理位置信息，需要开启共享设置！

浏览器检测支持情况：

if (navigator.geolocation) {
    console.log("浏览器支持!");
 }
else {
     console.log("浏览器不支持!");
 }

地理位置对象：navigator.geolocation对象

单次定位请求

方法 ：getCurrentPosition(successfn(position),errorfn(err),options)

position为请求成功后获取到的数据信息对象,err为请求失败函数返回的对象，options可以简单理解为配置对象…吧

在请求成功函数中有以下属性：

• 经度 : coords.longitude
• 纬度 : coords.latitude
• 准确度 : coords.accuracy
• 海拔 : coords.altitude
• 海拔准确度 : coords.altitudeAcuracy
• 行进方向 : coords.heading
• 地面速度 : coords.speed
• 时间戳 : new Date(position.timestamp)

在请求失败函数中有4种情况（err.code状态值）：

• 1为用户拒绝定位请问
• 2暂时获取不到位置信息
• 3为请求超时
• 4未知错误

第三个options是可选参数，属性如下：

• enableHighAccuracy——指示浏览器获取高精度的位置，默认为false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。
• timeout——指定获取地理位置的超时时间，默认不限时。单位为毫秒。
• maximumAge——最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为0，表示浏览器需要立刻重新计算位置。

JS：

window.onload = function() {
            var oInput = document.getElementById('input1');
            var oT = document.getElementById('t1');

            oInput.onclick = function() {
              //单词请求方法getCurrentPosition()
                navigator.geolocation.getCurrentPosition(function(position) {

                    oT.value += '经度:' + position.coords.longitude + '\n';
                    oT.value += '纬度 :' + position.coords.latitude + '\n';
                    oT.value += '准确度 :' + position.coords.accuracy + '\n';
                    oT.value += '海拔 :' + position.coords.altitude + '\n';
                    oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy + '\n';
                    oT.value += '行进方向 :' + position.coords.heading + '\n';
                    oT.value += '地面速度 :' + position.coords.speed + '\n';
                    oT.value += '时间戳:' + new Date(position.timestamp) + '\n';


                }, function(err) {

                    //err.code // 失败所对应的编号

                    // alert(err.code);
                    //1为用户拒绝定位请问
                    //2暂时获取不到位置信息
                    //3为请求超时
                    //4未知错误
                    switch(error.code){
                   case 1:
                   alert("用户拒绝定位请问");
                   break;

                   case 2:
                   alert("暂时获取不到位置信息");
                   break;

                   case 3:
                   alert("请求超时");
                   break;

                   case 4:
                    alert("未知错误");
                   break;
               }

                }, {//单次请求设置，避免多次请求
                    enableHighAcuracy: true,//更精确的查找
                    timeout: 5000,//获取位置允许最长时间
                    maximumAge: 5000//位置可以缓存的最大时间，
                });

            };

获取到的数据内容：（修改经纬度以防有人上门逼婚(●’◡’●)）

经度:210.29816389999999
纬度 :41.1548211
准确度 :131
海拔 :null
海拔准确度 :undefined
行进方向 :null
地面速度 :null
时间戳:Mon Jul 18 2016 21:05:31 GMT+0800 (中国标准时间)

---

多次定位请求 :

watchPosition(successfn(position),errorfn(err),options)

.和单次定位请求非常相似，此时需要改变位置才会触发，常在请求错误时关闭多次定位请求（类似于关闭定时器setInterval）

注意：移动设备有用，位置改变才会触发，可以通过配置options参数：frequency 来设置更新的频率!

多次定位请求JS：

        window.onload = function() {
            var oInput = document.getElementById('input1');
            var oT = document.getElementById('t1');

            oInput.onclick = function() {
                //多次请求方法
                timer = navigator.geolocation.watchPosition(function(position) {

                    oT.value += '经度:' + position.coords.longitude + '\n';
                    oT.value += '纬度 :' + position.coords.latitude + '\n';
                    oT.value += '准确度 :' + position.coords.accuracy + '\n';
                    oT.value += '海拔 :' + position.coords.altitude + '\n';
                    oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy + '\n';
                    oT.value += '行进方向 :' + position.coords.heading + '\n';
                    oT.value += '地面速度 :' + position.coords.speed + '\n';
                    oT.value += '时间戳:' + new Date(position.timestamp) + '\n';


                }, function(err) {

                    //err.code // 失败所对应的编号

                    // alert(err.code);
                    //1为用户拒绝定位请问
                    //2暂时获取不到位置信息
                    //3为请求超时
                    //4未知错误
                    switch (error.code) {
                        case 1:
                            alert("用户拒绝定位请问");
                            break;

                        case 2:
                            alert("暂时获取不到位置信息");
                            break;

                        case 3:
                            alert("请求超时");
                            break;

                        case 4:
                            alert("未知错误");
                            break;
                    }
                    navigator.geolocation.clearWatch(timer); //关闭定位请求

                }, { //单次请求设置，避免多次请求
                    enableHighAcuracy: true, //更精确的查找
                    timeout: 5000, //获取位置允许最长时间
                    maximumAge: 5000, //位置可以缓存的最大时间，
                    frequency: 1000 //多次定位请求更新频率
                });

            };

        };

---

LBS : 基于地图信息的应用

百度地图api：http://lbsyun.baidu.com/index.php?title=jspopular

百度地图秘钥ak的获取：http://www.tuicool.com/articles/2MbMjy

没有ak则会提示：

百度未授权使用地图API，可能是因为您提供的密钥不是有效的百度LBS开放平台密钥，或此密钥未对本应用的百度地图JavaScriptAPI授权。您可以访问如下网址了解如何获取有效的密钥：http://lbsyun.baidu.com/apiconsole/key#。

激活邮件可能被拦截了，到垃圾箱翻翻吧！(◎﹏◎)

示例：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密匙">script>
head>
<body>
  <div id="allmap">div>
  <script type="text/javascript">
  navigator.geolocation.getCurrentPosition(function(position){
    //获得经纬度
    var y = position.coords.longitude;
        var x = position.coords.latitude;
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(y,x), 14);  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("湛江");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  });

script>

body>
html>

有空来浪(●’◡’●)：

总结：地理信息位置的知识整理以及百度地图的应用，知识本身可能枯燥，但以为运用巧妙展现各种精彩！