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


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人物行走动画
Feb 24 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 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静态新闻列表自动生成代码
2007/06/14 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
jquery 笔记 事件
2011/11/02 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Pytorch转tflite方式
2020/05/25 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
小区停车场管理制度
2014/01/27 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
写给医院的感谢信
2015/01/22 职场文书
业务内勤岗位职责
2015/04/13 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
法律讲堂观后感
2015/06/11 职场文书
导游词之镜泊湖
2019/12/09 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python