`
buliedian
  • 浏览: 1195300 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

可以在前端实现的几个地理位置小功能

jsonpGoogle浏览器ChromeHTML5 
阅读更多

下文转自：http://www.oncoding.cn/2010/geo-location-frontend

<!-- by j5726 -->

在Smashing Magazine上看到这篇Entering The Wonderful World of Geo Location ，介绍了获取并处理用户地理位置的应用和方法， 很有意思。结合原文的内容，加上之前的一些应用，整理了几个可以完全在前端实现的地理位置相关小功能。

1.通过IP获取用户位置

很多时候需要通过IP判断用户的位置，通常的办法是通过自己的后台程序查询数据库得到。如果用户位置只是应用在前端，或者有其他的特殊原因(比如， 懒:)，也有一些其他办法来快速的获取用户位置。

maxmind.com 提供了一个 服务，通过引入一个js文件(http://j.maxmind.com/app/geoip.js )， 可以把他判断到的用户的国家、城市、经纬度等信息加入到页面中来。下面是从青岛访问这个js文件返回的内容：

查看源 代码
打印 帮助
1 function geoip_country_code() { return 'CN' ; } function geoip_country_name() { return 'China' ; } function geoip_city() { return 'Qingdao' ; } function geoip_region() { return '25' ; } function geoip_region_name() { return 'Shandong' ; } function geoip_latitude() { return '36.0986' ; } function geoip_longitude() { return '120.3719' ; } function geoip_postal_code() { return '' ; }

我们就可以利用这些信息做很多东西了：DEMO

2.W3C共享位置接口

HTML5加入了的贡献地理位置的浏览器API接口，目前firefox3.5等浏览器已经支持这一功能。

用法：
01 // if the browser supports the w3c geo api
02 if (navigator.geolocation){
03 // get the current position
04 navigator.geolocation.getCurrentPosition(
05
06 // if this was successful, get the latitude and longitude
07 function (position){
08 var lat = position.coords.latitude;
09 var lon = position.coords.longitude;
10 },
11 // if there was an error
12 function (error){
13 alert( 'ouch' );
14 });
15 }

看 DEMO

3. Google Gears 的 Geolocation API

Google Gears 是主 要提供本地存储功能的浏览器扩展，新版本的Gears中，加入了判断用户地理位置的API，通过IP、WIFI热点等判断位置。不过Gears的使用似乎 并不太广泛(Chrome内置了Gears，其他浏览器需要安装)，国内的地理位置信息也不够丰富，所以这个应用目前只可作为参考。

使用Gears的基本方法看这里 ，引 入gears_init.js ，使用Geolocation API的程序为：
1 var geo = factory.create( 'beta.geolocation' ); //创建 geolocation对象
2 var okCallback = function (d){
3 alert( '当前位置(纬度，经度): ' + d.latitude + ',' + d.longitude);
4 };
5 var errorCallback = function (err){
6 alert(err.message);
7 };
8 geo.getCurrentPosition(okCallback , errorCallback);

更多内容参考这篇文章：使用Gears获取当前地理位置 ，以及DEMO 。

4.逆经纬度解析

通过浏览器API等方式得到经纬度后，有时需要得到对应的城市名，这就是逆经纬度解析。

google maps api提供了一些经纬度解析方法，如果我们不想引入庞大的api，可以直接使用他的请求地址，通过jsonp 方式得到google的经纬度解析数据 。jsonp请求地址形式为：

http://ditu.google.cn/maps/geo?
output=json&oe=utf-8&q=纬度%2C经度
&key=你申请到的key
&mapclient=jsapi&hl=zh-CN&callback=myfunction

参数q为经纬度，参数callback为回调函数名。

可以看下这 个地址 的返回结果，数据非常丰富，并且还是中文的：