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

发表于

下文转自：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等浏览器已经支持这一功能。





用法：



















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为回调函数名。


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



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){










03
   
// the YQL statement










04
   
var
yql =
‘select from flickr.places where lat=’
+lat+
‘ and
lon=’
+lon;










05
 










06
   
// assembling
the YQL webservice API










07
   
var
url =
‘http://query.yahooapis.com/v1/public/yql?q=
‘
+










08
              
encodeURIComponent(yql)+
‘&format=json&diagnostics=’
+










09
              
‘false&callback=’
+callback;










10
 










11
   
// create a new
script node and add it to the document










12
   
var
s =
document.createElement(
‘script’
);










13
   
s.setAttribute(
‘src’
,url);










14
   
document.getElementsByTagName(
‘head’
)[0].appendChild(s);










15
 
};










16
 










17
 
// callback in case there is a place found










18
 
function
output(o){










19
   
if
(
typeof
(o.query.results.places.place)
!=
‘undefined’
){










20
     
alert(o.query.results.places.place.name);










21
   
}










22
 
}










23
 










24
 
// call the
function with my current lat/lon










25
 
getPlaceFromFlickr(36.6692270,117.0198960,
‘output’
);










26
</script>




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回调函数名。


举
个例子
，返回结果：



6.google maps 图片接口


有时候我们只想展示简单的地图，不需要交互和拖动，可以通过google maps提供的静态地图API
引入动态生成的地图图片，不过需要为你的域名申请一个key。


引入图片的url格式为：



















01
http:
//maps.google.com/maps/api/staticmap?










02
 










03
sensor=
false










04
&size=200x200










05
&maptype=roadmap










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




得到图片：


null


后记


关于地图的更多操作，可以参见以前的这篇文章：Google Maps
Api介绍与基础操作
。


随着互联网的发展，越来越多的功能可以在前端实现，出现了越来越多的强大的第三方服务，我们可以很方便的在我们的网站上加入一些实用的功能。这也许
就是web2.0的魅力吧。