一、Geolocation是什么，怎么玩？
跟你们分享个非常好用的小技能–Geolocation。这个HTML5里面的厉害工具，能在网页中悄悄找到你的具体位置！想一想你在电脑前，浏览器像个音响大侦探在默默帮你追踪位置。是不是超赞的？利用它，你可以搞出各种各样的位置相关服务，比如说找家近的餐厅、看看朋友在哪之类的。但是得记住，用之前，浏览器得先问问你好不好意思知道你在哪儿？你点点头答应，他才能开始行动哟。
二、怎么用Geolocation？简单三步走！
用Geolocation很简单，主要就是GetCurrentPosition这个方法，这家伙有3个好朋友：一个是成功后庆祝（回调函数），一个是失败后安慰（回调函数），还有一个是调整定位精度的选择项。比如你想在百度地图上标出自己在哪儿，只需要跑下这段代码，然后看，地图上马上出现个红点儿，告诉你“原来你在这儿！”不过，有的时候定位会有点误差，比如我上次就在宿舍里，结果地图上却是离我好几百米远的大学校门口，真是尴尬死了。
三、实战案例：我在百度地图上的小冒险
实际操作起来，我就给大家说说我上次用Geolocation在百度地图上找自己位置的趣事！当时用百度地图的API，还加了个convertor.js文件，这玩意儿就是用来换算坐标滴。最后跑出来的结果，发现我居然被定位到了大学城的某个地方，其实我人可是在华工宿舍！有那么点小误差，但是，这不也是挺好玩的么?每次开地图都感觉像在寻找神秘岛屿似的，期待能发现新的宝藏。
四、注意事项一：隐私保护，别大意！
用geolocation时，隐私可得当回事儿。虽然浏览器会让你点同意，不过咱自己心里还得有点谱不是？别忘了，位置信息泄露出去可是能惹出不少乱子。因此，无论是开发人员还是普通用户，处理这种小道消息都得小心翼翼才行。比方说，尽量避免在公共Wi-Fi下用这个功能，或者把浏览器的隐私设置弄明白，保证你的位置信息不被随随便便地就卖了。
五、注意事项二：定位精度，你得知道！
nbsp;html>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){ }
定位不准真心恼人！有的时候你明明就在A地，地图上却显示在B地，误差甚至能达到好几百米。特别是在城里，高楼大厦多，还有各种信号干扰，都可能让定位出岔子。所以，用Geolocation的时候别太过相信它，心里要有点数。要是你需要精确度较高的定位，还是换个专业点儿的工具。
六、注意事项三：兼容性问题，别忽视！
兼容性问题挺烦人的。有些浏览器不支持地理定位，比如那些比较旧或市井里不常见的浏览器。所以，要是你想搞个地理定位相关的应用，先看看目标用户用啥浏览器。否则到时候人家没法用你的作品，那可就丢人了。
七、注意事项四：错误处理，别慌张！
说到错误处理，这可是必须得做的事。如果你使用了地理定位功能，可能会面临一些麻烦，例如用户不愿分享位置、定位时间过长、网络连接中断等情况。这时候，你得有应对办法，像是提醒用户再次授权，或者给出默认的地点信息。记住，出了错别急，耐心解决即可。
八、小结：Geolocation，不只是定位那么简单
(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;
})();
说白了，Geolocation就是个特实用的东西，用它可以轻松得知我们在哪儿，还能开发很多好玩的应用！但是在用这玩意儿时，别忘了隐私保护啊、定位精准度啊、兼容性啥的，还有那些小地方处理好了才行。只要这家伙弄明白了，那你就能随心所欲地用Geolocation，让它给你带来更多惊喜。
好啦朋友们，今天我们聊到这儿关于地理定位（Geolocation）的话题就告一段落。你们有用过吗？又没碰到过哪些好玩或者尴尬得说不出口的事儿？赶紧来评论区说说你发的小插曲！别忘了给我点个赞还有分享出去，让大家都能一起来体验这奇妙的位置探索旅程！
评论0