下文转自:http://www.oncoding.cn/2010/geo-location-frontend
在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等浏览器已经支持这一功能。
用法:
02 |
if (navigator.geolocation){ |
04 |
navigator.geolocation.getCurrentPosition( |
08 |
var lat = position.coords.latitude; |
09 |
var lon = position.coords.longitude; |
看 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' ); |
2 |
var okCallback = function (d){ |
3 |
alert( '当前位置(纬度,经度): ' + d.latitude + ',' + d.longitude); |
5 |
var errorCallback = function (err){ |
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为回调函数名。
可以看下这 个地址的返回结果,数据非常丰富,并且还是中文的:
001 |
myfunction && myfunction( { |
002 |
"name" : "36.06023,120.3024" , |
009 |
"address" : "中国山东省青岛市市南区台西三路6号-10号" , |
013 |
"AdministrativeArea" : { |
014 |
"AdministrativeAreaName" : "山东省" , |
016 |
"DependentLocality" : { |
017 |
"DependentLocalityName" : "市南区" , |
019 |
"ThoroughfareName" : "台西三路6号-10号" |
022 |
"LocalityName" : "青岛市" |
026 |
"CountryNameCode" : "CN" |
038 |
"coordinates" : [ 120.3024027,36.0602271,0 ] |
042 |
"address" : "中国山东省青岛市市南区台西三路8号阿双美容美发厅" , |
046 |
"AdministrativeArea" : { |
047 |
"AdministrativeAreaName" : "山东省" , |
049 |
"DependentLocality" : { |
050 |
"AddressLine" : [ "阿双 美容美发厅" ], |
051 |
"DependentLocalityName" : "市南区" , |
053 |
"ThoroughfareName" : "台西三路8号" |
056 |
"LocalityName" : "青岛市" |
060 |
"CountryNameCode" : "CN" |
072 |
"coordinates" : [ 120.3024220,36.0600890,0 ] |
076 |
"address" : "中国青岛市市南区台西四路站" , |
079 |
"AddressLine" : [ "台西四路站" ] |
090 |
"coordinates" : [ 120.3032510,36.0599160,0 ] |
094 |
"address" : "中国青岛市市南区云南路(台西四路口)站" , |
097 |
"AddressLine" : [ "云南路(台西四路口)站" ] |
108 |
"coordinates" : [ 120.3041980,36.0612110,0 ] |
112 |
"address" : "中国青岛市市南区贵州路站" , |
115 |
"AddressLine" : [ "贵州路站" ] |
126 |
"coordinates" : [ 120.3005480,36.0583380,0 ] |
130 |
"address" : "中国青岛市市南区团岛站" , |
133 |
"AddressLine" : [ "团岛站" ] |
144 |
"coordinates" : [ 120.2991020,36.0597670,0 ] |
148 |
"address" : "中国山东省青岛市市南区团岛四路海湾花园" , |
152 |
"AdministrativeArea" : { |
153 |
"AdministrativeAreaName" : "山东省" , |
155 |
"DependentLocality" : { |
156 |
"AddressLine" : [ "海湾 花园" ], |
157 |
"DependentLocalityName" : "市南区" , |
159 |
"ThoroughfareName" : "团岛四 路" |
162 |
"LocalityName" : "青岛市" |
166 |
"CountryNameCode" : "CN" |
178 |
"coordinates" : [ 120.2974910,36.0611230,0 ] |
182 |
"address" : "中国山东省青岛市市南区" , |
186 |
"AdministrativeArea" : { |
187 |
"AdministrativeAreaName" : "山东省" , |
189 |
"DependentLocality" : { |
190 |
"DependentLocalityName" : "市南区" |
192 |
"LocalityName" : "青岛市" |
196 |
"CountryNameCode" : "CN" |
208 |
"coordinates" : [ 120.3877350,36.0667110,0 ] |
212 |
"address" : "中国山东省青岛市" , |
216 |
"AdministrativeArea" : { |
217 |
"AdministrativeAreaName" : "山东省" , |
219 |
"LocalityName" : "青岛市" |
223 |
"CountryNameCode" : "CN" |
235 |
"coordinates" : [ 120.3827710,36.0663480,0 ] |
243 |
"AdministrativeArea" : { |
244 |
"AdministrativeAreaName" : "山东省" |
247 |
"CountryNameCode" : "CN" |
259 |
"coordinates" : [ 117.0198960,36.6692270,0 ] |
Yahoo提供的接口
雅虎提供了一些经纬度查询接口,可以使用YQL查询。
查询语句为:
1 |
select * from flickr.places where lat=36.06023 and lon=120.3024 |
用法:
01 |
<script type= "text/javascript" charset= "utf-8" > |
02 |
function getPlaceFromFlickr(lat,lon,callback){ |
04 |
var yql = 'select * from flickr.places where lat=' +lat+ ' and lon=' +lon; |
07 |
var url = 'http://query.yahooapis.com/v1/public/yql?q=' + |
08 |
encodeURIComponent(yql)+ '&format=json&diagnostics=' + |
09 |
'false&callback=' +callback; |
12 |
var s = document.createElement( 'script' ); |
13 |
s.setAttribute( 'src' ,url); |
14 |
document.getElementsByTagName( 'head' )[0].appendChild(s); |
19 |
if ( typeof (o.query.results.places.place) != 'undefined' ){ |
20 |
alert(o.query.results.places.place.name); |
25 |
getPlaceFromFlickr(36.6692270,117.0198960, 'output' ); |
5.经纬度解析
经纬度解析就是通过地名取得经纬度数据,同样利用google那个请求地址,可以实现这一功能,请求地址格式为:
http://ditu.google.cn/maps/geo?output=json&oe=utf-8 & q=地名的url encode编码 &key=你申请到的key & mapclient=jsapi&hl=zh-CN&callback=myfunction
参数q为encodeURI(“中国山东省青岛市市北区”),callback是jsonp回调函数名。
举 个例子,返回结果:
01 |
myfunction && myfunction( { |
02 |
"name" : "中国山东省青岛市市北区" , |
09 |
"address" : "中国山东省青岛市市北区" , |
13 |
"AdministrativeArea" : { |
14 |
"AdministrativeAreaName" : "山东省" , |
16 |
"DependentLocality" : { |
17 |
"DependentLocalityName" : "市北区" |
23 |
"CountryNameCode" : "CN" |
35 |
"coordinates" : [ 120.3748010,36.0876620,0 ] |
6.google maps 图片接口
有时候我们只想展示简单的地图,不需要交互和拖动,可以通过google maps提供的静态地图API引入动态生成的地图图片,不过需要为你的域名申请一个key。
引入图片的url格式为:
06 |
&key=<em>你申请到的KEY</em> |
07 |
&markers=color:blue|label:1|37.4447,-122.161 |
08 |
&markers=color:red|label:2|37.3385,-121.886 |
09 |
&markers=color:green|label:3|37.3716,-122.038 |
10 |
&markers=color:yellow|label:4|37.7792,-122.42 |
得到图片:
后记
关于地图的更多操作,可以参见以前的这篇文章:Google Maps Api介绍与基础操作。
随着互联网的发展,越来越多的功能可以在前端实现,出现了越来越多的强大的第三方服务,我们可以很方便的在我们的网站上加入一些实用的功能。这也许 就是web2.0的魅力吧。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|