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


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的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 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实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
python插入排序算法实例分析
2015/07/03 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
奥林匹克的口号
2014/06/13 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
暑期家教宣传单
2015/07/14 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android