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

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

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

本文主要包含网站,谷歌定位等相关知识,匿名希望在学习及工作中可以帮助到您
如何在网站上添加谷歌定位信息?下面小编就为大家带来一篇在网站上添加谷歌定位信息的实现方法。希望对大家有所帮助。一起跟随小编过来看看吧

我们可以很容易地使用HTML5导航对象获取当前位置。请按照以下步骤来获得城市/国家的细节。

首先包括jQuery库

JavaScript Code复制内容到剪贴板

  1. <script type="text/javascript" src="jquery.js"></script>   
    jQuery(function() {   
      //call navigator object to get latitude and logtitute 
      if(navigator.geolocation) {   
    //getting current latitude and longtitude 
    navigator.geolocation.getCurrentPosition(function(position) {   
      //get location details based on latitude and longtitude from Google 
      var jsonUrl = "https://maps.googleapis.com/maps/api/geocode/json?latlng="+position.coords.latitude+","+position.coords.longitude   
      jQuery.getJSON(jsonUrl , function( data ) {   
         var results = data.results[0];   
                  console.info(results); //check firebug 
         alert(results.address_components[5].long_name); //City 
         alert(results.address_components[6].long_name); //State 
         alert(results.address_components[7].long_name); //Country 
      },   
      function(){   
         alert('Failed to get Location Details...');   
      });   
    return false;   
           });   
      }});

以上就是如何在网站上添加谷歌定位信息的详细内容,更多请关注微课江湖其它相关文章!

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

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

相关文章

  • 2018-12-03html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法_html5教程技巧
  • 2018-12-03Web 前端分为哪几个大方向,工资待遇如何,辛苦吗?
  • 2018-12-03HTML5 对各个标签的定义与规定:title
  • 2017-08-06HTML5标签大全
  • 2018-12-03如何评价html5规范正式定稿对互联网以及电子商务的影响?
  • 2018-12-03有HTML / XML这么好的前端及UI解决方案,微软为什么还要继续推WPF?
  • 2018-12-03为什么W3C要制定content-box盒子模型?IE5.5之前的IE盒子模型放在今天来看也是极好的啊
  • 2017-08-06HTML5 Canvas 起步(2) - 路径
  • 2018-12-03html5整理
  • 2018-12-03如何通俗易懂地向初学者通解释 jQuery、CSS3 和 HTML5 的关系?

文章分类

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

最近更新的内容

    • Canvas实现波浪进度图(附demo)
    • HTML5 Canvas中绘制一个像素宽的细线实现代码详情
    • HTML5使用DOM进行自定义控制
    • HTML5中<template>标签的详细介绍(图文)
    • HTML5 CSS3打造相册效果附源码下载_html5教程技巧
    • 使用html5制作loading图的示例_html5教程技巧
    • H5学习之旅-H5的表单(11)
    • 大学刚毕业想去培训ios,android和html5,请问哪个好点,就前景和工薪方面给解答,?
    • React组件的使用详解
    • 小强的HTML5移动开发之路(12)——从一个多媒体标签说起

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

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