小伙伴们，咱们今儿就侃侃这个HTML5的定位功能！超实用的，可以帮你找找在哪儿，简直就是开发需要知道你在哪儿的应用的必备神器！想不想试试看？打开个应用就能知道你在哪儿，是不是超炫？
说到HTML5的地理定位功能，就是用了GPS啊、Wi-Fi啦、手机信号之类的办法来找到你在哪儿。虽然这个功能挺厉害的，大部分情况下都能知道你在哪儿，但有时候也会不太准，特别是在屋里或者信号不好的地方，定位就吃力了。
浏览器中的地理定位怎么玩
搞定浏览器里的地理定位，容易到家了！现在的网页浏览器基本上都能兼容HTML5的地理定位啥玩儿意。写点儿小程序，就能告诉你的App用户在哪儿！举个栗子，你能用JavaScript用到navigator这个成员变量，再调用里面的geolocation对象，用上人家提供的那些方法，就可以轻松获得用户位置咯~
这个地方得提一下，就是当你浏览器要找你在哪儿时，得先经过你同意，因为得保护咱们的个人隐私。就像你用Chrome或者别的浏览器的话，它可能会问能不能给网站提供你的位置信息。只要你说可以，那Chrome就要想办法猜出你大概在哪儿，像发点网络信号给谷歌的定位服务这样。
地理定位的精度问题
说到定位精准度，真有点烦恼。在电脑上用HTML5定位，误差特别大。有的时候，你会发现自己被定到好几公里以外的地方去了。这种精度对有些应用来说当然不够！
但用HTML5在手机上搞地理定位，就要好多。只要把enableHighAccuracy设成真，就可以调用手机的全球定位系统（GPS）来获取更精确的地点了。可是，这也会让电池耗电多点哦～
地理定位的安全性和隐私问题
别忘了，用这个定位功能也得小心安全和隐私问题。因为有的人可能不愿意让别人知道自己在哪。所以，浏览器通常会先问一下你同不同意分享位置来保护你的隐私~
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
// 指示浏览器获取高精度的位置，默认为false
enableHighAccuracy: true,
// 指定获取地理位置的超时时间，默认不限时，单位为毫秒
timeout: 5000,
// 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。
maximumAge: 3000
});
}else{
alert("Your browser does not support Geolocation!");
}
作为开发人员，我们得在做应用的时候，为用户保护好隐私！比如说，我们给个选择权给用户，让他们自己决定地理位置要不要分享，或者只有必要的情况下收集这信息就行了。
实战案例：如何在你的应用中使用地理定位
好，聊完理论，现在咱来说说实战部分！首先，要把HTML5地理定位API加到代码里去。紧接着，用navigator.geolocation上的GetCurrentPosition这类方法就能知道用户所在地喽。
locationError: function(error){
switch(error.code) {
case error.TIMEOUT:
showError("A timeout occured! Please try again!");
break;
case error.POSITION_UNAVAILABLE:
showError('We can't detect your location. Sorry!');
break;
case error.PERMISSION_DENIED:
showError('Please allow geolocation access for this to work.');
break;
case error.UNKNOWN_ERROR:
showError('An unknown error occured!');
break;
}
}
想要知道自己在哪儿？别怕，我们有几个实用的小窍门帮你搞定。你看，有些选项像是enableHighAccuracy（要求更精确的定位）、timeout（等待定位完成的时间长短）还有maximumAge等等，它们都能让你随心所欲地掌控定位过程！举个例子，如果你把enableHighAccuracy设定成真的，那就能搜寻到更高精度的位置信息。
地理定位的错误处理
在用地理定位时，别忘了考虑可能出问题的地方！比如人家用户不愿意和咱们分享位置，设备也找不到方位，这种时候可得有点应对策略。那就是想办法设定点错误处理机制。这样一来，当遇到这两种情况时，系统就能自动处理掉。
这个回调函数里，看看出错原因，然后给你个提示。比如说，要是因为你没允许我使用你的位置，那就告诉你去手机设置里把这个权限打开；要是其它问题，再相应给个指点
locationSuccess: function(position){
var coords = position.coords;
var latlng = new google.maps.LatLng(
// 维度
coords.latitude,
// 精度
coords.longitude
);
var myOptions = {
// 地图放大倍数
zoom: 12,
// 地图中心设为指定坐标点
center: latlng,
// 地图类型
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// 创建地图并输出到页面
var myMap = new google.maps.Map(
document.getElementById("map"),myOptions
);
// 创建标记
var marker = new google.maps.Marker({
// 标注指定的经纬度坐标点
position: latlng,
// 指定用于标注的地图
map: myMap
});
//创建标注窗口
var infowindow = new google.maps.InfoWindow({
content:"您在这里
纬度："+
coords.latitude+
"
经度："+coords.longitude
});
//打开标注窗口
infowindow.open(myMap,marker);
}
地理定位的未来展望
到最后，咱们聊聊地理定位的前景好了。科技越来越发达了，所以咱们得想想看，地理定位会变得多么准确，多么好用。比如说，把蓝牙信号和室内定位技术这些数据都加进去，就能得到更精准的位置~
再说，以后大家越来越重视隐私了，所以，咱们这个地理定位技术也得跟着改进。比如说，可能以后出来更多的保密工具和选择，这样大家就可以更方便地掌控自己的位置消息~
总结与提问
明白！关于HTML5地理定位的内容今天就说这么多。我来讲讲原理，用起来怎么操作，精准度如何？安全保密啥情况？实际例子和解决bug都有提到喔。希望这些信息对您有用呦。
问题来啦：你怎么用地理位置服务提高自家APP的用户体验？
评论0