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

Json 前端之家
前端之家收集整理的这篇文章主要介绍了可以在前端实现的几个地理位置小功能，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_301_0@下文转自：http://www.oncoding.cn/2010/geo-location-frontend

@H_301_0@

@H_301_0@在Smashing Magazine上看到这篇Entering The Wonderful World of Geo Location ，介绍了获取并处理用户地理位置的应用和方法， 很有意思。结合原文的内容，加上之前的一些应用，整理了几个可以完全在前端实现的地理位置相关小功能。

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

@H_301_0@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 '' ; }
@H_301_0@我们就可以利用这些信息做很多东西了：DEMO

2.W3C共享位置接口@H_301_16@ @H_301_0@HTML5加入了的贡献地理位置的浏览器API接口，目前firefox3.5等浏览器已经支持这一功能。

@H_301_0@

@H_301_0@用法：
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 }
@H_301_0@看 DEMO

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

@H_301_0@使用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);
@H_301_0@更多内容参考这篇文章：使用Gears获取当前地理位置 ，以及DEMO 。

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

@H_301_0@google maps api提供了一些经纬度解析方法，如果我们不想引入庞大的api，可以直接使用他的请求地址，通过jsonp 方式得到google的经纬度解析数据 。jsonp请求地址形式为：

@H_301_0@http://ditu.google.cn/maps/geo?
output=json&oe=utf-8&q=纬度%2C经度
&key=你申请到的key
&mapclient=jsapi&hl=zh-CN&callback=myfunction

@H_301_0@参数q为经纬度，参数callback为回调函数名。

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

@H_301_0@Yahoo提供的接口

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

@H_301_0@查询语句为：

1 select * from flickr.places where lat=36.06023 and lon=120.3024
@H_301_0@用法：

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.经纬度解析@H_301_16@ @H_301_0@经纬度解析就是通过地名取得经纬度数据，同样利用google那个请求地址，可以实现这一功能，请求地址格式为：

@H_301_0@http://ditu.google.cn/maps/geo?output=json&oe=utf-8
&q=地名的url encode编码
&key=你申请到的key
&mapclient=jsapi&hl=zh-CN&callback=myfunction

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

@H_301_0@举 个例子 ，返回结果：

6.google maps 图片接口@H_301_16@ @H_301_0@有时候我们只想展示简单的地图，不需要交互和拖动，可以通过google maps提供的静态地图API 引入动态生成的地图图片，不过需要为你的域名申请一个key。

@H_301_0@引入图片的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
@H_301_0@得到图片：

@H_301_0@

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

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

猜你在找的Json相关文章

jsonp
　　jsonp需要在页面中添加一个<script>元素，由该元素来从其他服务器加载json数据。...
jsonp跨域
<script> var testApi = "地址"; $.ajax({ url:testApi,//可以不是本地域名...
MVC上的jsonp扩展，解决跨域访问问题
总是有人会遇到跨域问题，然后有个jsonp的解决方案，MVC中代码如下： public class JsonpR...
fastjson反序列化json对象时保留null值的key
最近开发中遇到调用第三方web_api的功能，后端在处理json数据时使用fastjson来做反序列化，...
JsonCpp 的使用
JSON全称为JavaScript ObjectNotation，它是一种轻量级的数据交换格式，易于阅读、编写、解...
jsonp
var newScript = document.createElement(‘script‘); newScript.setAtt...
jsonp 跨域
$.ajax({ url:"http://192.168.100.47:8080/ais-connect/data/newai...
JSONArray 去重
前台说 只能传给我这样的数据 [     {         "labelName":"皮肤颜...
FastJson的坑
1.list中放入同一个对象，会出现内存地址引用{"$ref":"#[0]"}，后台可以识...
fastJson转换对象与字符串
static class TempClass{ private String name; private int age; public String getName(...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作