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

下文转自：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提供的接口

雅虎提供了一些经纬度查询接口，可以使用YQL查询。

查询语句为：

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