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


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 29 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
HTML基础详解(上)
Oct 16 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
239军机修复记
2021/03/02 无线电
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
Destoon模板制作简明教程
2014/06/20 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python元字符的用法实例解析
2018/01/17 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
商场主管竞聘书
2014/03/31 职场文书
二年级学生评语大全
2014/04/23 职场文书
导师推荐信范文
2014/05/09 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
党支部季度考核意见
2015/06/02 职场文书