您的位置：首页 > 其它

几种实现地理位置的功能

2011-02-11 11:12 441 查看

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	//ifthebrowsersupportsthew3cgeoapi

02	if (navigator.geolocation){

03	//getthecurrentposition

04	navigator.geolocation.getCurrentPosition(

06	//ifthiswassuccessful,getthelatitudeandlongitude

07	function (position){

08	var lat=position.coords.latitude;

09	var lon=position.coords.longitude;

},

11	//iftherewasanerror

12	function (error){

13	alert( 'ouch' );

});

看DEMO

3.GoogleGears的GeolocationAPI

GoogleGears
是主
要提供本地存储功能的浏览器扩展，新版本的Gears中，加入了判断用户地理位置的API，通过IP、WIFI热点等判断位置。不过Gears的使用似乎
并不太广泛(Chrome内置了Gears，其他浏览器需要安装)，国内的地理位置信息也不够丰富，所以这个应用目前只可作为参考。

使用Gears的基本方法看这里
，引入gears_init.js
，使用GeolocationAPI的程序为：

查看源代码
打印
帮助

1	var geo=factory.create( 'beta.geolocation' ); //创建geolocation对象

2	var okCallback= function (d){

3	alert( '当前位置(纬度，经度):' +d.latitude+ ',' +d.longitude);

};

5	var errorCallback= function (err){

6	alert(err.message);

};

8	geo.getCurrentPosition(okCallback,errorCallback);

更多内容参考这篇文章：使用Gears获取当前地理位置
，以及DEMO
。

4.逆经纬度解析

通过浏览器API等方式得到经纬度后，有时需要得到对应的城市名，这就是逆经纬度解析。

googlemapsapi提供了一些经纬度解析方法，如果我们不想引入庞大的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为回调函数名。

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

showsource
查看源代码
打印
帮助

001	myfunction&&myfunction({

002	"name" : "36.06023,120.3024" ,

003	"Status" :{

004	"code" :200,

005	"request" : "geocode"

},

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号"

},

022	"LocalityName" : "青岛市"

},

025	"CountryName" : "中国" ,

026	"CountryNameCode" : "CN"

},

029	"ExtendedData" :{

030	"LatLonBox" :{

031	"north" :36.0633254,

032	"south" :36.0570301,

033	"east" :120.3054361,

034	"west" :120.2991409

},

037	"Point" :{

038	"coordinates" :[120.3024027,36.0602271,0]

},{

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号"

},

056	"LocalityName" : "青岛市"

},

059	"CountryName" : "中国" ,

060	"CountryNameCode" : "CN"

},

063	"ExtendedData" :{

064	"LatLonBox" :{

065	"north" :36.0632366,

066	"south" :36.0569414,

067	"east" :120.3055696,

068	"west" :120.2992744

},

071	"Point" :{

072	"coordinates" :[120.3024220,36.0600890,0]

},{

075	"id" : "p3" ,

076	"address" : "中国青岛市市南区台西四路站" ,

077	"AddressDetails" :{

078	"Accuracy" :9,

079	"AddressLine" :[ "台西四路站" ]

},

081	"ExtendedData" :{

082	"LatLonBox" :{

083	"north" :36.0630636,

084	"south" :36.0567684,

085	"east" :120.3063986,

086	"west" :120.3001034

},

089	"Point" :{

090	"coordinates" :[120.3032510,36.0599160,0]

},{

093	"id" : "p4" ,

094	"address" : "中国青岛市市南区云南路(台西四路口)站" ,

095	"AddressDetails" :{

096	"Accuracy" :9,

097	"AddressLine" :[ "云南路(台西四路口)站" ]

},

099	"ExtendedData" :{

100	"LatLonBox" :{

101	"north" :36.0643586,

102	"south" :36.0580634,

103	"east" :120.3073456,

104	"west" :120.3010504

},

107	"Point" :{

108	"coordinates" :[120.3041980,36.0612110,0]

},{

111	"id" : "p5" ,

112	"address" : "中国青岛市市南区贵州路站" ,

113	"AddressDetails" :{

114	"Accuracy" :9,

115	"AddressLine" :[ "贵州路站" ]

},

117	"ExtendedData" :{

118	"LatLonBox" :{

119	"north" :36.0614856,

120	"south" :36.0551904,

121	"east" :120.3036956,

122	"west" :120.2974004

},

125	"Point" :{

126	"coordinates" :[120.3005480,36.0583380,0]

},{

129	"id" : "p6" ,

130	"address" : "中国青岛市市南区团岛站" ,

131	"AddressDetails" :{

132	"Accuracy" :9,

133	"AddressLine" :[ "团岛站" ]

},

135	"ExtendedData" :{

136	"LatLonBox" :{

137	"north" :36.0629146,

138	"south" :36.0566194,

139	"east" :120.3022496,

140	"west" :120.2959544

},

143	"Point" :{

144	"coordinates" :[120.2991020,36.0597670,0]

},{

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" : "团岛四路"

},

162	"LocalityName" : "青岛市"

},

165	"CountryName" : "中国" ,

166	"CountryNameCode" : "CN"

},

169	"ExtendedData" :{

170	"LatLonBox" :{

171	"north" :36.0642706,

172	"south" :36.0579754,

173	"east" :120.3006386,

174	"west" :120.2943434

},

177	"Point" :{

178	"coordinates" :[120.2974910,36.0611230,0]

},{

181	"id" : "p8" ,

182	"address" : "中国山东省青岛市市南区" ,

183	"AddressDetails" :{

184	"Accuracy" :4,

185	"Country" :{

186	"AdministrativeArea" :{

187	"AdministrativeAreaName" : "山东省" ,

188	"Locality" :{

189	"DependentLocality" :{

190	"DependentLocalityName" : "市南区"

},

192	"LocalityName" : "青岛市"

},

195	"CountryName" : "中国" ,

196	"CountryNameCode" : "CN"

},

199	"ExtendedData" :{

200	"LatLonBox" :{

201	"north" :36.0954205,

202	"south" :36.0413849,

203	"east" :120.4266629,

204	"west" :120.2858189

},

207	"Point" :{

208	"coordinates" :[120.3877350,36.0667110,0]

},{

211	"id" : "p9" ,

212	"address" : "中国山东省青岛市" ,

213	"AddressDetails" :{

214	"Accuracy" :4,

215	"Country" :{

216	"AdministrativeArea" :{

217	"AdministrativeAreaName" : "山东省" ,

218	"Locality" :{

219	"LocalityName" : "青岛市"

},

222	"CountryName" : "中国" ,

223	"CountryNameCode" : "CN"

},

226	"ExtendedData" :{

227	"LatLonBox" :{

228	"north" :36.3313685,

229	"south" :35.9407727,

230	"east" :120.6326294,

231	"west" :120.0970459

},

234	"Point" :{

235	"coordinates" :[120.3827710,36.0663480,0]

},{

238	"id" : "p10" ,

239	"address" : "中国山东省" ,

240	"AddressDetails" :{

241	"Accuracy" :2,

242	"Country" :{

243	"AdministrativeArea" :{

244	"AdministrativeAreaName" : "山东省"

},

246	"CountryName" : "中国" ,

247	"CountryNameCode" : "CN"

},

250	"ExtendedData" :{

251	"LatLonBox" :{

252	"north" :38.4055838,

253	"south" :34.3851760,

254	"east" :122.7159599,

255	"west" :114.8033683

},

258	"Point" :{

259	"coordinates" :[117.0198960,36.6692270,0]

}]

Yahoo提供的接口

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

查询语句为：

查看源代码
打印
帮助

1	select * from flickr.places where lat=36.06023 and lon=120.3024

用法：

查看源代码
打印
帮助

01	<scripttype= "text/javascript" charset= "utf-8" >

02	function getPlaceFromFlickr(lat,lon,callback){

03	//theYQLstatement

04	var yql= 'select*fromflickr.placeswherelat=' +lat+ 'andlon=' +lon;

06	//assemblingtheYQLwebserviceAPI

var

url=

'YQLGeoLibraryandIntroductiontoGeoHackingtalk

5.经纬度解析
经纬度解析就是通过地名取得经纬度数据，同样利用google那个请求地址，可以实现这一功能，请求地址格式为：
http://ditu.google.cn/maps/geo?output=json&oe=utf-8
&q=地名的urlencode编码

&key=你申请到的key

&mapclient=jsapi&hl=zh-CN&callback=myfunction

参数q为encodeURI(“中国山东省青岛市市北区”)，callback是jsonp回调函数名。

举个例子
，返回结果：

showsource
查看源代码
打印
帮助

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.googlemaps图片接口
有时候我们只想展示简单的地图，不需要交互和拖动，可以通过googlemaps提供的静态地图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

得到图片：



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

随着互联网的发展，越来越多的功能可以在前端实现，出现了越来越多的强大的第三方服务，我们可以很方便的在我们的网站上加入一些实用的功能。这也许就是web2.0的魅力吧。
                                            
                                        
                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理  
                    
                    
                    
                        
                         标签： 
                                                
                        
                    

                
            

            
                相关文章推荐
                
                
                    
                                                                        可以在前端实现的几个地理位置小功能
                                                可以在前端实现的几个地理位置小功能
                                                c#实现根据网络IP显示地理位置功能
                                                AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
                                                可以在前端实现的几个地理位置小功能
                                                AngularJS进阶(二十)HTML5实现获取地理位置信息并定位功能
                                                HTML5实现获取地理位置信息并定位功能
                                                c#实现根据网络IP显示地理位置功能示例
                                                实现IP到地理位置的反查功能
                                                3行代码，实现IP到地理位置的反查功能
                                                HTML5实现获取地理位置信息并定位功能
                                                可以在前端实现的几个地理位置小功能
                                                HTML5实现获取地理位置信息并定位功能
                                                c#实现根据网络IP显示地理位置功能示例
                                                可以在前端实现的几个地理位置小功能
                                                可以在前端实现的几个地理位置小功能
                                                实现Tab功能的几种方式
                                                (android实战)实现【关于我们】功能（textview的文本样式几种实现方式）
                                                可以通过基类实现的几种功能。vs2008 .net 2.0
                                                android 实现home键功能的几种方式，退到后台但不退出程序
                                                                    
                
            
        
        
            
            
            
                
                    新的分享
                    
                        
                                                        一次教科书级别的Redis高可用架构设计实践 - Redis
                                                        曾光：北京这次的毒株不像国内流行类型
                                                        从PRD文档到产品上线，有哪些问题需要解决？
                                                        vue3自定义指令的使用
                                                        Oracle SQL性能优化最常用的40条建议 - ORACLE
                                                        程序员翻车常见反应，你中枪了吗？ - 职场生涯
                                                        新鲜开源：基于Prometheus的企业监控平台设计与实现 - 运维
                                                        嵌入式软件开发之程序架构设计-任务调度
                                                        【Java面试】请简单说一下你对受检异常和非受检异常的理解
                                                        奇安信更新招股书：第一季亏损过5亿，齐向东持股38%
                                                        艾瑞咨询：2020年中国后智能厨房案例研究报告
                                                        艾瑞咨询：2020年中国人工智能+物流发展研究报告
                                                    
                    
                
            

            
                
                    章节导航
                    
                        
                        
                        
                    
                
            
        
 
        
    


    
    
    
        
        
    
     
    
    
    添加评论
    
    
    分享网址
    
    
    分享文章
    
    
    返回顶部
    
    


    
        https://www.geek-share.com/ 
        GeekShare·极客分享·来自极客的分享  © 2016-2019 ·  
        粤ICP备17045047号