为什么浏览器知道你在哪里？（浏览器定位技术）

转自：http://hi.baidu.com/baidu_bianlin/item/09c65c26735fab44479962eb

绝大多数的智慧型手机都有GPS功能，其实除了手机之外，透过Foursquare等服务网站搭配支持的浏览器，桌上型电脑照样也能玩。这次，笔者要带大家认识几个基本的定位技术，以及说明W3C如何让浏览器玩地理定位。

地理定位不一定等于GPS，有很多种技术都可以用来知道你现在在哪里，以下是比较常见的：



▲不知道自己在哪里？让浏览器来告诉你吧。
一、IP定位

每一台连上网路的电脑都具有一个独一无二的IP位址，经由IP位址可以反查出电脑位置，但是结果并不精确，而且很容易到受到ISP的IP分配机制影响，而造成误差。
二、GPS定位

GPS是我们最常听到的定位技术，它是利用卫星来定位，可以很精确的侦测到使用者位置。但是要玩GPS，行动装置一定要有GPS模组，而且尽管GPS非常精准，还是会有技术上的局限，比如在侦测位置时，GPS的感应器要位于视线范围内（line of sight），因此在有很多高楼大厦、或者是障碍物的地方，GPS反而没有办法运作自如。
三、Wi-Fi三角测量定位

这个定位技术可以说是为都会区而设的，因为热闹的大都市通常会有不少Wi-Fi热点，定位供应商可以根据这些热点的相对位置、距离等建立一个资料库。Wi-Fi三角测量适用于GPS无法渗透的地方，不过缺点是需要经常更新资料库。
四、基地台三角测量定位

借助基地台之间的相对位置，可以定位出用户在哪里，只要你的手机收得到讯号，就能定位。

一般来说，这四种技术的准确性由高而低分别是：GPS定位、Wi-Fi三角测量、基地台三角测量、IP定位。但还是要视环境而定，比如你到没有Wi-Fi热点的地方、或是手机信号不好，定位效果当然也会受影响。



▲手机定位有GPS与基地台定位的加持，通常会比电脑运用Wi-Fi与IP定位来得准确。
地理定位有标准的API

定位的方法与服务这么多，应用程序界面（API）的一致性就变得非常重要，如果API有很多种，或者是硬体的规格非常复杂，那么一台行动装置势必得浪费很多成本去处理相容性问题。

考虑到这一点，W3C决定制定地理定位规格标准。意思就是今天无论你是用什么方法、哪间供应商的资料定位，都可以用同样的API来存取信息。
让浏览器内建定位功能

标准化之后，要用浏览器实作就不困难了。如此一来有心的网站就可以透过浏览器、浏览器再透过ISP来取得读者的地理情报。

那么，浏览器是怎么知道用户位置的呢？难道浏览器本身就得具备一个庞大的资料库、或者是需要再透过即时定位？其实有的浏览器开发商会跟ISP合作，比如Skyhook之类的业者在蒐集用户分享出来的Wi-Fi、IP等定位资料后，就可以推算出经纬度。当然了，这些信息一定会有误差，基于保护用户隐私考量，大家应该不会希望自己变成全民公敌吧。



▲浏览器收集定位资料时，会先微求用户的允许，确认用户愿意分享所在位置的信息。
定位代码实作

W3C的地理定位API可以跨平台及浏览器。首先，网站开发人员可以利用以下的代码A测试用户的浏览器是否支持地理定位。如果可以支持，那么代码B的successFunction就会被启动，我们就可以直接收集到经纬度的座标数据。目前可以支持地理定位的浏览器有Opera10.6 （包括 Opera Mobile 10.1）、Chrome5、Firefox3.6以及Safari 5（包括iPhone上的Safari Mobile）。IE浏览器各个版本目前都不支持这个功能，详情您可以浏览：IE9浏览器目前仍不支持Geolocation标准

代码A

//Check if browser supports W3C Geolocation API if （navigator.geolocation） {

navigator.geolocation.getCurrentPosition（successFunction, errorFunction）; } else {

alert（'It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.'）; }

代码B

function successFunction（position） {

var lat = position.coords.latitude;

var long = position.coords.longitude;

alert（'Your latitude is :'+lat+' and longitude is '+long）; }