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


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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
Html5 滚动穿透的方法
May 13 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
php使用curl获取https请求的方法
2015/02/11 PHP
php实现encode64编码类实例
2015/03/24 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
Python如何操作docker redis过程解析
2020/08/10 Python
村委会主任先进事迹
2014/01/15 职场文书
教师辞职报告范文
2014/01/20 职场文书
学校十一活动方案
2014/02/01 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
工作年限证明模板
2015/06/15 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS