下文转自：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 |
functiongeoip_country_code() { return'CN'; } functiongeoip_country_name() { return'China'; } functiongeoip_city() { return'Qingdao'; } functiongeoip_region() { return'25'; } functiongeoip_region_name() { return'Shandong'; } functiongeoip_latitude() { return'36.0986'; } functiongeoip_longitude() { return'120.3719'; } functiongeoip_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 |
varlat = position.coords.latitude; |
09 |
varlon = 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 |
vargeo = factory.create('beta.geolocation'); //创建geolocation对象 |
2 |
varokCallback = function(d){ |
3 |
alert('当前位置(纬度，经度): '+ d.latitude + ','+ d.longitude); |
4 |
}; |
5 |
varerrorCallback = 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为回调函数名。
可以看下这 个地址的返回结果，数据非常丰富，并且还是中文的：
001 |
myfunction && myfunction( { |
002 |
"name": "36.06023,120.3024", |
003 |
"Status": { |
004 |
"code": 200, |
005 |
"request": "geocode" |
006 |
}, |
007 |
"Placemark": [ { |
008 |
"id": "p1", |
009 |
"address": "中国山东省青岛市市南区台西三路6号-10号", |
010 |
"AddressDetails": { |
011 |
"Accuracy": 8, |
012 |
"Country": { |
013 |
"AdministrativeArea": { |
014 |
"AdministrativeAreaName": "山东省", |
015 |
"Locality": { |
016 |
"DependentLocality": { |
017 |
"DependentLocalityName": "市南区", |
018 |
"Thoroughfare": { |
019 |
"ThoroughfareName": "台西三路6号-10号" |
020 |
} |
021 |
}, |
022 |
"LocalityName": "青岛市" |
023 |
} |
024 |
}, |
025 |
"CountryName": "中国", |
026 |
"CountryNameCode": "CN" |
027 |
} |
028 |
}, |
029 |
"ExtendedData": { |
030 |
"LatLonBox": { |
031 |
"north": 36.0633254, |
032 |
"south": 36.0570301, |
033 |
"east": 120.3054361, |
034 |
"west": 120.2991409 |
035 |
} |
036 |
}, |
037 |
"Point": { |
038 |
"coordinates": [ 120.3024027,36.0602271,0 ] |
039 |
} |
040 |
},{ |
041 |
"id": "p2", |
042 |
"address": "中国山东省青岛市市南区台西三路8号阿双美容美发厅", |
043 |
"AddressDetails": { |
044 |
"Accuracy": 9, |
045 |
"Country": { |
046 |
"AdministrativeArea": { |
047 |
"AdministrativeAreaName": "山东省", |
048 |
"Locality": { |
049 |
"DependentLocality": { |
050 |
"AddressLine": [ "阿双 美容美发厅"], |
051 |
"DependentLocalityName": "市南区", |
052 |
"Thoroughfare": { |
053 |
"ThoroughfareName": "台西三路8号" |
054 |
} |
055 |
}, |
056 |
"LocalityName": "青岛市" |
057 |
} |
058 |
}, |
059 |
"CountryName": "中国", |
060 |
"CountryNameCode": "CN" |
061 |
} |
062 |
}, |
063 |
"ExtendedData": { |
064 |
"LatLonBox": { |
065 |
"north": 36.0632366, |
066 |
"south": 36.0569414, |
067 |
"east": 120.3055696, |
068 |
"west": 120.2992744 |
069 |
} |
070 |
}, |
071 |
"Point": { |
072 |
"coordinates": [ 120.3024220,36.0600890,0 ] |
073 |
} |
074 |
},{ |
075 |
"id": "p3", |
076 |
"address": "中国青岛市市南区台西四路站", |
077 |
"AddressDetails": { |
078 |
"Accuracy": 9, |
079 |
"AddressLine": [ "台西四路站"] |
080 |
}, |
081 |
"ExtendedData": { |
082 |
"LatLonBox": { |
083 |
"north": 36.0630636, |
084 |
"south": 36.0567684, |
085 |
"east": 120.3063986, |
086 |
"west": 120.3001034 |
087 |
} |
088 |
}, |
089 |
"Point": { |
090 |
"coordinates": [ 120.3032510,36.0599160,0 ] |
091 |
} |
092 |
},{ |
093 |
"id": "p4", |
094 |
"address": "中国青岛市市南区云南路(台西四路口)站", |
095 |
"AddressDetails": { |
096 |
"Accuracy": 9, |
097 |
"AddressLine": [ "云南路(台西四路口)站"] |
098 |
}, |
099 |
"ExtendedData": { |
100 |
"LatLonBox": { |
101 |
"north": 36.0643586, |
102 |
"south": 36.0580634, |
103 |
"east": 120.3073456, |
104 |
"west": 120.3010504 |
105 |
} |
106 |
}, |
107 |
"Point": { |
108 |
"coordinates": [ 120.3041980,36.0612110,0 ] |
109 |
} |
110 |
},{ |
111 |
"id": "p5", |
112 |
"address": "中国青岛市市南区贵州路站", |
113 |
"AddressDetails": { |
114 |
"Accuracy": 9, |
115 |
"AddressLine": [ "贵州路站"] |
116 |
}, |
117 |
"ExtendedData": { |
118 |
"LatLonBox": { |
119 |
"north": 36.0614856, |
120 |
"south": 36.0551904, |
121 |
"east": 120.3036956, |
122 |
"west": 120.2974004 |
123 |
} |
124 |
}, |
125 |
"Point": { |
126 |
"coordinates": [ 120.3005480,36.0583380,0 ] |
127 |
} |
128 |
},{ |
129 |
"id": "p6", |
130 |
"address": "中国青岛市市南区团岛站", |
131 |
"AddressDetails": { |
132 |
"Accuracy": 9, |
133 |
"AddressLine": [ "团岛站"] |
134 |
}, |
135 |
"ExtendedData": { |
136 |
"LatLonBox": { |
137 |
"north": 36.0629146, |
138 |
"south": 36.0566194, |
139 |
"east": 120.3022496, |
140 |
"west": 120.2959544 |
141 |
} |
142 |
}, |
143 |
"Point": { |
144 |
"coordinates": [ 120.2991020,36.0597670,0 ] |
145 |
} |
146 |
},{ |
147 |
"id": "p7", |
148 |
"address": "中国山东省青岛市市南区团岛四路海湾花园", |
149 |
"AddressDetails": { |
150 |
"Accuracy": 9, |
151 |
"Country": { |
152 |
"AdministrativeArea": { |
153 |
"AdministrativeAreaName": "山东省", |
154 |
"Locality": { |
155 |
"DependentLocality": { |
156 |
"AddressLine": [ "海湾 花园"], |
157 |
"DependentLocalityName": "市南区", |
158 |
"Thoroughfare": { |
159 |
"ThoroughfareName": "团岛四 路" |
160 |
} |
161 |
}, |
162 |
"LocalityName": "青岛市" |
163 |
} |
164 |
}, |
165 |
"CountryName": "中国", |
166 |
"CountryNameCode": "CN" |
167 |
} |
168 |
}, |
169 |
"ExtendedData": { |
170 |
"LatLonBox": { |
171 |
"north": 36.0642706, |
172 |
"south": 36.0579754, |
173 |
"east": 120.3006386, |
174 |
"west": 120.2943434 |
175 |
} |
176 |
}, |
177 |
"Point": { |
178 |
"coordinates": [ 120.2974910,36.0611230,0 ] |
179 |
} |
180 |
},{ |
181 |
"id": "p8", |
182 |
"address": "中国山东省青岛市市南区", |
183 |
"AddressDetails": { |
184 |
"Accuracy": 4, |
185 |
"Country": { |
186 |
"AdministrativeArea": { |
187 |
"AdministrativeAreaName": "山东省", |
188 |
"Locality": { |
189 |
"DependentLocality": { |
190 |
"DependentLocalityName": "市南区" |
191 |
}, |
192 |
"LocalityName": "青岛市" |
193 |
} |
194 |
}, |
195 |
"CountryName": "中国", |
196 |
"CountryNameCode": "CN" |
197 |
} |
198 |
}, |
199 |
"ExtendedData": { |
200 |
"LatLonBox": { |
201 |
"north": 36.0954205, |
202 |
"south": 36.0413849, |
203 |
"east": 120.4266629, |
204 |
"west": 120.2858189 |
205 |
} |
206 |
}, |
207 |
"Point": { |
208 |
"coordinates": [ 120.3877350,36.0667110,0 ] |
209 |
} |
210 |
},{ |
211 |
"id": "p9", |
212 |
"address": "中国山东省青岛市", |
213 |
"AddressDetails": { |
214 |
"Accuracy": 4, |
215 |
"Country": { |
216 |
"AdministrativeArea": { |
217 |
"AdministrativeAreaName": "山东省", |
218 |
"Locality": { |
219 |
"LocalityName": "青岛市" |
220 |
} |
221 |
}, |
222 |
"CountryName": "中国", |
223 |
"CountryNameCode": "CN" |
224 |
} |
225 |
}, |
226 |
"ExtendedData": { |
227 |
"LatLonBox": { |
228 |
"north": 36.3313685, |
229 |
"south": 35.9407727, |
230 |
"east": 120.6326294, |
231 |
"west": 120.0970459 |
232 |
} |
233 |
}, |
234 |
"Point": { |
235 |
"coordinates": [ 120.3827710,36.0663480,0 ] |
236 |
} |
237 |
},{ |
238 |
"id": "p10", |
239 |
"address": "中国山东省", |
240 |
"AddressDetails": { |
241 |
"Accuracy": 2, |
242 |
"Country": { |
243 |
"AdministrativeArea": { |
244 |
"AdministrativeAreaName": "山东省" |
245 |
}, |
246 |
"CountryName": "中国", |
247 |
"CountryNameCode": "CN" |
248 |
} |
249 |
}, |
250 |
"ExtendedData": { |
251 |
"LatLonBox": { |
252 |
"north": 38.4055838, |
253 |
"south": 34.3851760, |
254 |
"east": 122.7159599, |
255 |
"west": 114.8033683 |
256 |
} |
257 |
}, |
258 |
"Point": { |
259 |
"coordinates": [ 117.0198960,36.6692270,0 ] |
260 |
} |
261 |
} ] |
262 |
} |
263 |
) |
Yahoo提供的接口
查询语句为：
1 |
select* fromflickr.places wherelat=36.06023 andlon=120.3024 |
用法：
01 |
<script type="text/javascript"charset="utf-8"> |
02 |
functiongetPlaceFromFlickr(lat,lon,callback){ |
03 |
// the YQL statement |
04 |
varyql = 'select * from flickr.places where lat='+lat+' and lon='+lon; |
05 |
06 |
// assembling the YQL webservice API |
07 |
varurl = '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 |
vars = 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 |
functionoutput(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回调函数名。
举 个例子，返回结果：
01 |
myfunction && myfunction( { |
02 |
"name": "中国山东省青岛市市北区", |
03 |
"Status": { |
04 |
"code": 200, |
05 |
"request": "geocode" |
06 |
}, |
07 |
"Placemark": [ { |
08 |
"id": "p1", |
09 |
"address": "中国山东省青岛市市北区", |
10 |
"AddressDetails": { |
11 |
"Accuracy": 4, |
12 |
"Country": { |
13 |
"AdministrativeArea": { |
14 |
"AdministrativeAreaName": "山东省", |
15 |
"Locality": { |
16 |
"DependentLocality": { |
17 |
"DependentLocalityName": "市北区" |
18 |
}, |
19 |
"LocalityName": "青岛市" |
20 |
} |
21 |
}, |
22 |
"CountryName": "中国", |
23 |
"CountryNameCode": "CN" |
24 |
} |
25 |
}, |
26 |
"ExtendedData": { |
27 |
"LatLonBox": { |
28 |
"north": 36.1237216, |
29 |
"south": 36.0515859, |
30 |
"east": 120.4388307, |
31 |
"west": 120.3107713 |
32 |
} |
33 |
}, |
34 |
"Point": { |
35 |
"coordinates": [ 120.3748010,36.0876620,0 ] |
36 |
} |
37 |
} ] |
38 |
} |
39 |
) |
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 |
得到图片：
后记
关于地图的更多操作，可以参见以前的这篇文章：Google Maps Api介绍与基础操作。
随着互联网的发展，越来越多的功能可以在前端实现，出现了越来越多的强大的第三方服务，我们可以很方便的在我们的网站上加入一些实用的功能。这也许 就是web2.0的魅力吧。