HTML5 Geolocation简介
HTML5是网站开发里很火爆的技术，它带了个Geolocation API，能轻轻松松地帮我们找到用户的位置喔！这个功能让我们的服务更有个性，让用户用起来更舒心。不过，在使用这个API之前，浏览器会先要问你同不同意公开你的位置，这都是为了保护你的个人隐私~
Geolocation API的使用方法
在HTML5里头，有个专门的地方叫做GeolocationAPI，通过它提供的GetCurrentPosition方法，你就能知道客户端现在在哪儿。这个步骤总共带着三样东西——一个获得定位成功之后触发的回调函数、另一个碰到问题失败了就派上用场的回调函数和一些附加的选项。设置好这几样，你就能随心所欲控制地理位置查找的过程了。
咱们平时开发的时候，先瞧瞧浏览器有没有Geolocation API。如果支持的话，就让用户授权告诉我们他们在哪儿。一旦用户愿意给出这些信息，就能用getCurrentPosition方法来获得他们的具体位置了。然后，根据得到的数据，咱们可以在地图上标出来。
实例演示与结果分析
让我用一个小例子告诉你怎么用Geolocation API找到我们在哪儿，然后把那个地方显示出来，就像在百度地图那样。可惜，有时候我们可能发现这个定位结果不那么准确，还是有一点儿误差的！
咱们试验出的结果是，大学城内环东四路上的方向有点不准，误差大概有200-300米。这个误差可能和网速啦、设备精确度之类的地方有关。
代码示例解析
咱们来看看怎么使用Geolocation API获得你在哪儿的信息，然后用百度地图API让你看哪儿就自动出现在地图上。当然，得先安装一下百度地图提供的坐标转换器convertor.js，把别人给我们的经纬度坐标变成地图能用得了的格式！
javascript //示例代码 咱们用这个方法，navigator.geolocation.getCurrentPosition(的意思就是获取当前位置。 成功回调函数就是这样只是收到了一个位置的参数。地形位置的纬度给定。 很容易，只需要将你的经度值设定为你手机定位信息中的经度就行了。 //使用百度地图API显示当前位置 我们就用BMap创建个"container"的地图容器。 首先，我们需要定义一个点的坐标。想象有两个数字，分别代表东经和北纬。这就是我们定义的那个点，它叫做point。接着，让我们用一个叫做BMap的东西来创建这个点。这可能是一个地图类或者别的什么，不过不管，只要能定义那个点就好。所以，你只需要传给BMap一对数字，那就是 longitude 和 latitude。然后它会帮你创建一个新的BMap.Point对象，也就是我们想要的那个点。 map.centerAndZoom(point, 15); 新建个 BMap 的标记对象，叫它 marker。 map.addOverlay(marker);
H5地理位置Demo if (window.navigator.geolocation) { var options = { enableHighAccuracy: true, }; window.navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options); } else { alert("浏览器不支持html5来获取地理位置信息"); } function handleSuccess(position){ // 获取到当前位置经纬度 本例中是chrome浏览器取到的是google地图中的经纬度 var lng = position.coords.longitude; var lat = position.coords.latitude; // 调用百度地图api显示 var map = new BMap.Map("map"); var ggPoint = new BMap.Point(lng, lat); // 将google地图中的经纬度转化为百度地图的经纬度 BMap.Convertor.translate(ggPoint, 2, function(point){ var marker = new BMap.Marker(point); map.addOverlay(marker); map.centerAndZoom(point, 15); }); } function handleError(error){ }
}
遇到错误时，函数errorCallback会接收到一个名为error的参数。
告诉你出了什么事:""+错误消息。通过这个小例子你能看出来，只要我们拿到用户的地理位置信息，就能把它用来做各种有意思的事情，比如提供定位服务，推送个性化推荐呀等等。不过要特别留心处理那些无法获取位置信息时给出的错误提示，这样才能让大家用得更舒心！
定位精准性问题探讨
在使用HTML5获取我们地理位置时，有时候定位并不是很准确，为什么会这样？主要是受到了这些原因
地理环境问题挺多的，比如说高楼太多、手机信号不好等等都可能影响到咱们用GPS时候信号的接收和定位准确度。
2.网络状态：网络延迟或不稳定也可能导致定位结果不准确。
装备好才行：不同的装备接收到GPS信号之后处理起来不太相同，这也可能关系到定位能不能够准确无误。
所以，做基于位置服务应用的时候，要多琢磨下这些因素，看看业务场景，然后优化下，这样才能给用户带来更好的使用体验！
(function() { // 闭包 function load_script(xyUrl, callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = xyUrl; // 借鉴了jQuery的script跨域方法 script.onload = script.onreadystatechange = function() { if ((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) { callback && callback(); // Handle memory leak in IE script.onload = script.onreadystatechange = null; if (head && script.parentNode) { head.removeChild(script); } } }; // Use insertBefore instead of appendChild to circumvent an IE6 bug. head.insertBefore(script, head.firstChild); } function translate(point, type, callback) { var callbackName = 'cbk_' + Math.round(Math.random() * 10000); // 随机函数名 var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from=" + type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName; // 动态创建script标签 load_script(xyUrl); BMap.Convertor[callbackName] = function(xyResult) { delete BMap.Convertor[callbackName]; // 调用完需要删除改函数 var point = new BMap.Point(xyResult.x, xyResult.y); callback && callback(point); } } window.BMap = window.BMap || {}; BMap.Convertor = {}; BMap.Convertor.translate = translate; })();安全与隐私保护
来谈个轻松的话题吧——当我们用HTML5 Geolocation收集用户的地点信息时，很重要的是注意保护他们的隐私，确保数据安全！作为开发者，你得让用户知道你会把他们的数据用到哪里，并且只有得到他们许可才可以这样做。同时，在传输和储存这些数据的时候，也不能马虎，一定要做好防护，防止数据被乱用或者泄漏。
结语
这篇文章把 HTML5 Geolocation 获取地理定位原理说得很清楚，告诉了我们怎么用这个功能，还讲了大家可能会遇到什么难题。在实际操作中，我们要考虑各种因素，再根据情况来改善或升级项目。
上来就告诉咱们，你们觉得HTML5 Geolocation这玩意儿用起来会有啥问题？还有就是咋把定位搞得更准？大家都来聊聊！
原文链接：https://www.icz.com/technicalinformation/web/2024/04/13142.html，转载请注明出处~~~
评论0