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


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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
Jul 12 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
CSS link与@import的区别和用法解析
May 07 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 和 MySQL 基础教程(三)
2006/10/09 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
Python实现代码统计工具(终极篇)
2016/07/04 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python递归实现打印多重列表代码
2020/02/27 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
信息管理专业学生自荐信格式
2013/09/22 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
年终晚会主持词
2014/03/25 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
医院科室评语
2015/01/04 职场文书
2015年预算员工作总结
2015/05/14 职场文书
行政处罚决定书
2015/06/24 职场文书
同乡会致辞
2015/07/30 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers