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


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图片边框
Nov 04 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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读取csv文件内容的详解
2013/06/18 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
sina的lightbox效果。
2007/01/09 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python 实现插入排序算法
2012/06/05 Python
Python实现的二维码生成小软件
2014/07/11 Python
以一段代码为实例快速入门Python2.7
2015/03/31 Python
python制作一个桌面便签软件
2015/08/09 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python实现Kmeans聚类算法
2020/06/10 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
实习销售业务员自我鉴定
2013/09/21 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
出纳岗位职责范本
2015/03/31 职场文书
质量承诺书格式范文
2015/04/28 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript