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

分类：Json作者：编程之家用户

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

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

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

举 个例子，返回结果：

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

优化cesium里的热力图
文章浏览阅读2.4k次。最近要优化cesium里的热力图效果，浏览了网络上的各种方法，发现大多是贴在影像上的。这么做好是好，但是会被自生添加的模型或者其他数据给遮盖。其次是网上的方法大多数是截取成一个矩形。不能自定义的截取自己所需要的。经过尝试，决定修改下cesium heatmap，让他达到我们需要的要求。首先先下载 cesium heatmap包。其中我们可以看到也是通过叠加entity达到添加canvas的方法绘制到地图上。我们先把这一段代码注释} else {} };
python读写json文件方法详解
文章浏览阅读1.2w次，点赞3次，收藏19次。在 Python中读取 json文件也可以使用 sort （）函数，在这里我介绍一个简单的示例程序： （4）如果我们想将字符串转换为列表形式，只需要添加一个变量来存储需要转换的字符串即可。在上面的代码中，我们创建了一个名为` read`的对象，然后在文件的开头使用`./`关键字来命名该对象，并在文件中定义了一个名为` json`的变量，并在其中定义了一个名为` json`的字段。比如，我们可以使用 read方法读取 json文件中的内容，然后使用 send方法将其发送到 json文件中。_python怎么读取json文件
Python API：它是什么以及如何使用它
文章浏览阅读1.4k次。首字母缩略词 API 代表应用程序编程接口，它是一种设备，例如用于使用编程代码发送和检索数据的服务器。最常见的是，该技术用于从源检索数据并将其显示给软件应用程序及其用户。当您访问网页时，API 的工作方式与浏览器相同，信息请求会发送到服务器，如何在 Windows PC 中手动创建系统还原点服务器会做出响应。唯一的区别是服务器响应的数据类型，对于 API，数据是 JSON 类型。JSON 代表 JavaScript Object Notation，它是大多数软件语言中 API 的标准数据表示法。_api是什么 python
解决一个JSON反序列化问题-空字符串变为空集合
文章浏览阅读802次，点赞10次，收藏10次。解决一个JSON反序列化问题-空字符串变为空集合_cannot coerce empty string ("") to element of `java.util.arraylist
Untiy Json和Xml的序列化和反序列化
文章浏览阅读882次。Unity Json和Xml的序列化和反序列化_unity json反序列化存储换行
使用ant design vue的a-upload上传组件，自定义上传事件，点了导入图标按钮就自动打开了电脑上的文件夹，将选中的.json文件里的数据解析出来页面使用（纯前端操作）
文章浏览阅读796次。reader.readAsText(data.file)中data.file的数据格式为。使用FileReader对象读取文件内容，最后将文件内容进行处理使用。_a-upload 同时支持文件和文件夹
json解析之fastjson和jackson使用对比
文章浏览阅读775次，点赞19次，收藏10次。fastjson是由国内的阿里推出的一种json处理器，由java语言编写，无依赖，不需要引用额外的jar包，能直接运行在jdk环境中，它的解析速度是非常之快的，目前超过了所有json库。提示：以下是引用fastjson的方法，数据未涉及到私密信息。_解析器用fastjson还是jackson
【Qt之JSON文件】QJsonDocument、QJsonObject、QJsonArray等类介绍及使用
文章浏览阅读940次。【Qt之JSON文件】QJsonDocument、QJsonObject、QJsonArray等类介绍及使用_使用什么方法检查qjsondocument是否为空
ajax与 JSON
文章浏览阅读957次，点赞34次，收藏22次。主要内容原生 ajax重点重点JSON熟悉章节目标掌握原生 ajax掌握jQuery ajax掌握JSON第一节 ajax1. 什么是ajaxAJAX 全称为，表示异步的Java脚本和Xml文件，是一种异步刷新技术。2. 为什么要使用ajaxServlet进行网页的变更往往是通过请求转发或者是重定向来完成，这样的操作更新的是整个网页，如果我们只需要更新网页的局部内容，就需要使用到AJAX来处理了。因为只是更新局部内容，因此，Servlet。
@JsonFormat与@DateTimeFormat
文章浏览阅读1.4k次，点赞45次，收藏13次。主要介绍了JsonFormat与@DateTimeFormat注解实例解析,文中通过示例代码介绍的非常详细，对大家的学习 或者工作具有一定的参考学习价值,需要的朋友可以参考下 这篇文章主要介绍了从数据库获取时间传到前端进行展示的时候，我们有时候可能无法得到一个满意的时间格式的时间日期，在数据库中显 示的是正确的时间格式，获取出来却变成了时间戳，@JsonFormat注解很好的解决了这个问题，我们通过使用 @JsonFormat可以很好的解决：后台到前台时间格式保持一致的问题，
@JsonDeserialize和@JsonSerialize注解的使用
文章浏览阅读1k次。JsonDeserialize：json反序列化注解，作用于setter()方法，将json数据反序列化为java对象。可以理解为用在处理接收的数据上。_jsondeserialize
labelme标注的json文件转yolo格式
文章浏览阅读2.7k次。labelme标注的json文件是在数据标注时产生，不能直接应用于模型训练。各大目标检测训练平台或项目框架均有自己的数据格式要求，通常为voc、coco或yolo格式。由于yolov8项目比较火热，故此本博文详细介绍将json格式标注转化为yolo格式的过程及其代码。_labelme json 转 yolo
mysql聚合函数andjson_object 例子
文章浏览阅读790次，点赞26次，收藏6次。GROUP_CONCAT_UNORDERED(): 与GROUP_CONCAT类似，但不保证结果的顺序。COUNT_DISTINCT_AND_ORDERED(): 计算指定列的不同值的数量，并保持结果的顺序。COUNT_ALL_DISTINCT(): 计算指定列的所有不同值的数量（包括NULL）。AVG_RANGE(): 计算指定列的最大值和最小值之间的差异的平均值。JSON_OBJECT(): 将结果集中的行转换为JSON对象。COUNT_DISTINCT(): 计算指定列的不同值的数量。_mysql json 聚合
ajax同步与异步,json-serve的安装与使用,node.js的下载
文章浏览阅读1.2k次。ajax同步与异步,json-serve的安装与使用,node.js的下载_json-serve 与node版本
C# 操作json
文章浏览阅读1.7k次。`.net core`提供了Json处理模块，在命名空间`System.Text.Json`中，下面通过顶级语句，对C#的Json功能进行讲解。_c# json
python之json文件读写操作
文章浏览阅读2.8k次。主要介绍了python对于json文件的读写操作内容_python读取json文件
Json中文乱码问题的解决方法——C#实现
文章浏览阅读770次。然而，有时候在处理包含中文字符的Json数据时会出现乱码的情况。本文将介绍一种解决Json中文乱码问题的常见方法，并提供相应的源代码和描述。而某些情况下，中文字符可能会被错误地编码或解码，导致乱码的出现。通过适当地控制编码和解码过程，我们可以有效地处理包含中文字符的Json数据，避免乱码的发生。通过控制编码和解码过程，我们可以确保Json数据中的中文字符能够正确地传输和解析。为了解决这个问题，我们可以使用C#的System.Text.Encoding类提供的方法进行编码和解码的控制。_c# json 中文编码
【工具】XML和JSON互相转换
文章浏览阅读997次。【代码】【工具】XML和JSON互相转换。_xml 转json
jsonpath提取数据
文章浏览阅读1.1k次。json path 提取数据_jsonpath数组取值
pandas read_json时ValueError: Expected object or value的解决方案
文章浏览阅读3w次，点赞35次，收藏36次。本文主要介绍了pandas read_json时ValueError: Expected object or value的解决方案，希望能对学习python的同学们有所帮助。文章目录1. 问题描述2. 解决方案_valueerror: expected object or value
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot