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


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 25 HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
css3手动实现pc端横向滚动
Jun 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
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
php 字符串替换的方法
2012/01/10 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
javascript import css实例代码
2008/07/18 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
Python中的ctime()方法使用教程
2015/05/22 Python
基于python socketserver框架全面解析
2017/09/21 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
python连接mongodb集群方法详解
2020/02/13 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
保安自我鉴定范文
2013/12/08 职场文书
管理专员自荐信
2014/01/26 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
校园安全演讲稿
2014/05/09 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
Spring Bean是如何初始化的详解
2022/03/22 Java/Android