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


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 04 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
css弧边选项卡的项目实践
May 07 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无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
Javascript this指针
2009/07/30 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python计数排序和基数排序算法实例
2014/04/25 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python内置函数reversed()用法分析
2018/03/20 Python
python读取图片任意范围区域
2019/01/23 Python
Python语言进阶知识点总结
2019/05/28 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
Python如何操作docker redis过程解析
2020/08/10 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
大学毕业自我评价
2014/02/02 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
中国好声音广告词
2014/03/18 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
高中政治教师教学反思
2016/02/23 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
Python实现简单的俄罗斯方块游戏
2021/09/25 Python