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


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新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 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下实现在指定目录搜索指定类型文件的函数
2008/10/03 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
input按钮的事件处理大全
2010/12/10 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python中字典和JSON互转操作实例
2015/01/19 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
计算机专业推荐信范文
2013/11/27 职场文书
八项规定整改措施
2014/02/12 职场文书
科技工作者先进事迹
2014/08/16 职场文书
人代会简报
2015/07/21 职场文书
网络研修心得体会
2016/01/08 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
使用Redis做预定库存缓存功能
2022/04/02 Redis