几种实现地理位置的功能

技术2025-03-25 21

1.通过IP获取用户位置

很多时候需要通过IP判断用户的位置，通常的办法是通过自己的后台程序查询数据库得到。如果用户位置只是应用在前端，或者有其他的特殊原因(比如，懒:)，也有一些其他办法来快速的获取用户位置。

maxmind.com 提供了一个服务，通过引入一个js文件(http://j.maxmind.com/app/geoip.js )，可以把他判断到的用户的国家、城市、经纬度等信息加入到页面中来。下面是从青岛访问这个js文件返回的内容：

查看源代码打印帮助 1 function geoip_country_code() { return 'CN' ; } 2 function geoip_country_name() { return 'China' ; } 3 function geoip_city() { return 'Qingdao' ; } 4 function geoip_region() { return '25' ; } 5 function geoip_region_name() { return 'Shandong' ; } 6 function geoip_latitude() { return '36.0986' ; } 7 function geoip_longitude() { return '120.3719' ; } 8 function geoip_postal_code() { return '' ; }

我们就可以利用这些信息做很多东西了：DEMO

另外，腾讯也有一个类似的接口，地址为 http://fw.qq.com/ipaddress，可以得到访问者的省、市信息，返回的格式如下：

查看源代码打印帮助 1 var IPData = new Array( "123.235.153.126" , "" , "山东省" , "青岛市" );

具体的应用可以看这里：断桥残雪WordPress天气插件

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

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

show source 查看源代码打印帮助 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>

使用YQL进行更多地理信息查询，可以看这个PPT：YQL Geo Library and Introduction to Geo Hacking talk

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

举个例子，返回结果：

show source 查看源代码打印帮助 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格式为：

得到图片：

后记

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

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

最新回复(0)