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


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的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 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 empty函数 使用说明
2009/08/10 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
js css后面所带参数含义介绍
2013/08/18 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
详谈js原型继承的一些问题
2017/09/06 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue cli2.0单页面title修改方法
2018/06/07 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python3 操作符重载方法示例
2017/11/23 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
python字符串判断密码强弱
2020/03/18 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
消防宣传口号
2014/06/16 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
Python中requests库的用法详解
2022/06/05 Python