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


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 相关文章推荐
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 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自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
PHP7新功能总结
2019/04/14 PHP
tagName的使用,留一笔
2006/06/26 Javascript
javascript 对象定义方法 简单易学
2009/03/22 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
Node.js的特点详解
2017/02/03 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
angular ng-click防止重复提交实例
2017/06/16 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
Python SQLAlchemy基本操作和常用技巧(包含大量实例,非常好)
2014/05/06 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
Python爬取成语接龙类网站
2018/10/19 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
仓管岗位职责范本
2014/02/08 职场文书
教师节促销方案
2014/03/22 职场文书
解除合同协议书
2014/04/17 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
大学生个人总结范文
2015/02/15 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL