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

下文转自：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为回调函数名。

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

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提供的接口

雅虎提供了一些经纬度查询接口，可以使用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回调函数名。

举 个例子 ，返回结果：

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的魅力吧。