Javascript学习总结@html5实现定位地理位置

时间 2019-11-11

标签 javascript 学习总结 html5 html 实现定位地理位置栏目 JavaScript 繁體版

原文原文链接

简述

最近在苦逼学习Javascript，而且是有任务须要去完成的，所以就有一个想法要总结记录一下本身的学习成果。此次的总结主题是html5实现定位地理位置的任务，结合原生的Javascript实现此功能。 javascript

html5

1. 什么是html5？ html

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改版本，2014年10月29日，万维网联盟宣布，通过接近8年的艰苦努力，该标准规范终于制定完成，命名为html5。 html5
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的
HTML 工做团队。HTML 5 的第一份正式草案已于2008年1月22日公布。 java
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具有了某些 HTML5
支持。2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工做者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠定石。” git

2. html5有什么特色和优点？ web

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的遨游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器一样具有支持HTML5的能力。 canvas
HTML5手机应用的最大优点就是能够在网页上直接调试和修改。 api
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas
标记。HTML5还引进了新的功能，能够真正改变用户与文档的交互方式。浏览器

3.html能作什么？服务器

移动web
手机APP
更好的PC站点优化

html5 - 地理位置定位技术

这里是我在个人demo下的实现思路，你大可做为参考也能够指正一下个人思路的问题，谢谢。
地理位置（Geolocation）是 HTML5 的重要特性之一，提供了肯定用户位置的功能，借助这个特性可以开发基于位置信息的应用。在个人demo中使用的是百度提供的api接口，调用html5的geolocation方法获取客户端当前经纬度，从而得到客户端所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。
值得注意的一点是，PC不少浏览器对于html5的定位技术是不太友好的，不少浏览器都是默认拒绝定位，通常只有IE是能够正常使用，可是获取到的经纬度误差很大（这个缘由极可能是由于PC的定位获取客户机位置的时候不是当前电脑的位置，而多是浏览器调用服务器的物理机器的位置，不知道这个缘由）；相反在手机访问的时候，因为通常手机上都有GPS模块，因此定位效果会好不少，缘由就在于手机上的GPS模块对geolocation特性的支持是很好的。最终的结论是，html5的定位在手机上测试是最佳的选择，PC建议使用IE浏览器。

具体实现方案

好了，废话很少说（其实已经说了不少），立马进入实战阶段。

function getLocation() { var options = {
        enableHighAccuracy : true,
        maximumAge : 1000 }
    alert('this is getLocation()'); if (navigator.geolocation) { //浏览器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
    } else { //浏览器不支持geolocation alert('您的浏览器不支持地理位置定位');
    }
}

这里我写了一个方法，主要功能是在调用html5的geolocation()前，先判断当前浏览器是否支持html5，这个判断基本在不少PC浏览器都会让程序挂掉（缘由就是PC绝大部分浏览器不支持或者拒绝html5定位）
若是浏览器支持，那么程序就会调用geolocation方法了，这是方法里面有2个回调函数：一个是定位成功后的处理操做（通常程序会返回经纬度给你进行后续的定位数据处理），另一个是定位失败后的处理操做（具体大概就是错误信息，而后就是你的定位失败后的后续操做），第三个参数不多用到，我本身也没有去关注它有什么用，各位看官有兴趣能够了解一下。

//成功时 function onSuccess(position) { //返回用户位置 //经度 var longitude = position.coords.longitude; //纬度 var latitude = position.coords.latitude;
    alert('当前地址的经纬度：经度' + longitude + '，纬度' + latitude); //根据经纬度获取地理位置，不太准确，获取城市区域仍是能够的 var map = new BMap.Map("allmap"); var point = new BMap.Point(longitude, latitude); var gc = new BMap.Geocoder();
    gc.getLocation(point, function(rs) { var addComp = rs.addressComponents;
        alert(addComp.province + ", " + addComp.city + ", "+ addComp.district + ", " + addComp.street + ", "+ addComp.streetNumber);
    });
    postData(longitude, latitude);
}

我这里写了一个成功后的回调函数，第一步获取定位成功返回的经纬度数据，而后结合百度那边提供的接口进行具体位置的转换，最后我还有一个数据提交的方法，这个是我具体业务的后续操做了，你能够根据具体状况进行特殊处理。下面附上百度接口：

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>

//失败时 function onError(error) { switch (error.code) { case 1:
            alert("位置服务被拒绝"); break; case 2:
            alert("暂时获取不到位置信息"); break; case 3:
            alert("获取信息超时"); break; case 4:
            alert("未知错误"); break;
    } //经度 var longitude = 23.1823780000; //纬度 var latitude = 113.4233310000;
    postData(longitude, latitude);
}

紧接着就是定位失败的回调函数了，这个就简单输出错误信息，而后我也写了一个失败后的后续操做，你能够根据你的须要进行本身的具体操做。

这样，整个html5定位算是完成了，不算太难，但也不简单，由于里面有不少可挖掘的空间，好比定位精度，定位范围，还有具体的地图定位和导航扩展的后续开发，能够说可扩展性很强，难度也会逐步提高，因此是一个值得研究的技术，个人技术有限，先研究到这里吧，最后附上完整的代码。

完整demo代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>demo</title> </head> <body> </body> </html> <!--头部模块 end--> <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script> <script type="text/javascript" > // ======================================= html定位地理位置 开始 ================================================= function getLocation() { var options = { enableHighAccuracy : true, maximumAge : 1000 } alert('this is getLocation()'); if (navigator.geolocation) { //浏览器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess, onError, options); } else { //浏览器不支持geolocation alert('您的浏览器不支持地理位置定位'); } } //成功时 function onSuccess(position) { //返回用户位置 //经度 var longitude = position.coords.longitude; //纬度 var latitude = position.coords.latitude; alert('当前地址的经纬度：经度' + longitude + '，纬度' + latitude); //根据经纬度获取地理位置，不太准确，获取城市区域仍是能够的 var map = new BMap.Map("allmap"); var point = new BMap.Point(longitude, latitude); var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs) { var addComp = rs.addressComponents; alert(addComp.province + ", " + addComp.city + ", "+ addComp.district + ", " + addComp.street + ", "+ addComp.streetNumber); }); // 这里后面能够写你的后续操做了 postData(longitude, latitude); } //失败时 function onError(error) { switch (error.code) { case 1: alert("位置服务被拒绝"); break; case 2: alert("暂时获取不到位置信息"); break; case 3: alert("获取信息超时"); break; case 4: alert("未知错误"); break; } // 这里后面能够写你的后续操做了 //经度 var longitude = 23.1823780000; //纬度 var latitude = 113.4233310000; postData(longitude, latitude); } // ======================================= html定位地理位置 结束 ================================================= // =============================== 业务逻辑 开始 ================================= // 页面载入时请求获取当前地理位置 window.onload = function(){ // html5获取地理位置 getLocation(); }; // =============================== 业务逻辑 结束 ================================= </script>

总结

html5定位技术的扩展性很强，技术应用范围很广，也是颇有价值的一门技术，值得研究。
geolocation的两个回调函数有不少想象空间，值得咱们深思研究。
对于我来讲，我算是收获一门技能，在手机定位上的一个技术