• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 如何在网站上添加谷歌定位信息_html5教程技巧

如何在网站上添加谷歌定位信息_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含网站,谷歌定位等相关知识,匿名希望在学习及工作中可以帮助到您
我们可以很容易地使用HTML5导航对象获取当前位置。请按照以下步骤来获得城市/国家的细节。

首先包括jQuery库

  1. jQuery(function() {
  2. //call navigator object to get latitude and logtitute
  3. if(navigator.geolocation) {
  4. //getting current latitude and longtitude
  5. navigator.geolocation.getCurrentPosition(function(position) {
  6. //get location details based on latitude and longtitude from Google
  7. var jsonUrl = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude
  8. jQuery.getJSON(jsonUrl , function( data ) {
  9. var results = data.results[0];
  10. console.info(results); //check firebug
  11. alert(results.address_components[5].long_name); //City
  12. alert(results.address_components[6].long_name); //State
  13. alert(results.address_components[7].long_name); //Country
  14. },
  15. function(){
  16. alert('Failed to get Location Details...');
  17. });
  18. return false;
  19. });
  20. }});

以上这篇如何在网站上添加谷歌定位信息就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

原文地址:http://www.cnblogs.com/mivi/archive/2016/04/16/5398183.html

您可能想查找下面的文章:

  • HTML5移动端手机网站开发流程
  • HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
  • html5 css3网站菜单实现代码
  • html5构建触屏网站之touch事件介绍
  • html5构建触屏网站之网站尺寸探讨
  • 使用HTML5的链接预取功能(link prefetching)给网站提速
  • 如何在网站上添加谷歌定位信息
  • 移动端网站设计优化要点
  • 使用React写一个网站的心得体会
  • 如何在网站上添加谷歌定位信息

相关文章

  • 2018-12-03html5的新增的标签和废除的标签简要概述_html5教程技巧
  • 2018-12-03HTML5中div、article、section的区别及使用介绍_html5教程技巧
  • 2018-12-03网页 head 标签中的 JS 和 CSS,哪种文件放在前面,哪种放在后面比较好?
  • 2018-12-03HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)的详情介绍
  • 2018-12-03基于第一个PhoneGap(cordova)的应用详解 _html5教程技巧
  • 2018-12-03HTML5 Canvas 起步(2) - 路径_html5教程技巧
  • 2018-12-03深入研究HTML5实现图片压缩上传功能_html5教程技巧
  • 2018-12-03让IE9以下版本的浏览器兼容HTML5的方法_html5教程技巧
  • 2018-12-03CSS如何实现这种背景效果?
  • 2018-12-03基于HTML5 Canvas实现矢量工控风机叶轮旋转的示例代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用仿ActionScript的语法来编写html5——终篇
    • H5学习之旅-H5的框架(13)
    • HTML5 canvas 基本语法
    • html5在移动端的屏幕适应问题示例探讨
    • HTML5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius
    • HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
    • HTML5开发实例-ThreeJs实现粒子动画飘花效果代码分享
    • HTML5表单的属性有哪些?
    • Html5如何实现文件异步上传功能的实例分析
    • html5中返回TimeRanges对象的属性buffered

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有