如何在网站上添加谷歌定位信息


Posted in HTML / CSS onApril 16, 2016

我们可以很容易地使用HTML5导航对象获取当前位置。请按照以下步骤来获得城市/国家的细节。

首先包括jQuery库

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript" src="jquery.js"></script>   
  2.   
  3. jQuery(function() {   
  4.   
  5.   //call navigator object to get latitude and logtitute   
  6.   
  7.   if(navigator.geolocation) {   
  8.   
  9. //getting current latitude and longtitude   
  10.   
  11. navigator.geolocation.getCurrentPosition(function(position) {   
  12.   
  13.   //get location details based on latitude and longtitude from Google   
  14.   
  15.   var jsonUrl = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude   
  16.   
  17.   jQuery.getJSON(jsonUrl , function( data ) {   
  18.   
  19.      var results = data.results[0];   
  20.   
  21.               console.info(results); //check firebug   
  22.   
  23.      alert(results.address_components[5].long_name); //City   
  24.   
  25.      alert(results.address_components[6].long_name); //State   
  26.   
  27.      alert(results.address_components[7].long_name); //Country   
  28.   
  29.   },   
  30.   
  31.   function(){   
  32.   
  33.      alert('Failed to get Location Details...');   
  34.   
  35.   });   
  36.   
  37. return false;   
  38.   
  39.     
  40.   
  41.        });   
  42.   
  43.   }});  

以上这篇如何在网站上添加谷歌定位信息就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

原文地址:http://www.cnblogs.com/mivi/archive/2016/04/16/5398183.html

HTML / CSS 相关文章推荐
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
css3.0 图形构成实例练习一
Mar 19 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
css3 文字断裂效果
Apr 22 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 #HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 #HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 #HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 #HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 #HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 #HTML / CSS
你不知道的5个HTML5新功能
Jun 28 #HTML / CSS
You might like
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
AngularJs Forms详解及简单示例
2016/09/01 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
puppeteer库入门初探
2019/01/09 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
python提取内容关键词的方法
2015/03/16 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
学生会部长竞聘书
2014/03/31 职场文书
篮球社团活动总结
2014/06/27 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
2014年团委工作总结
2014/11/13 职场文书
综合素质自我评价评语
2015/03/06 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
领导新年致辞2016
2015/07/29 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python