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


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垂直手风琴菜单
Jun 28 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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
层叠菜单的动态生成
2006/10/09 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php中in_array函数用法探究
2014/11/25 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
Python 使用多属性来进行排序
2019/09/01 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
法人身份证明书
2014/10/08 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
旅游安全责任协议书
2016/03/22 职场文书
goland 设置project gopath的操作
2021/05/06 Golang