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

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

分类:HTML_HTML5答疑 - 常见问题 · 发布时间:2023-08-27 18:41 · 阅读:10198

如何在网站上添加谷歌定位信息?下面小编就为大家带来一篇在网站上添加谷歌定位信息的实现方法。希望对大家有所帮助。一起跟随小编过来看看吧

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

首先包括jQuery库

JavaScript Code复制内容到剪贴板
  1.   
  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.   }});  

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

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

标签:
谷歌定位 网站

相关文章

HTML5标签正确的使用方式

HTML5标签是HTML语言的最新版本引入的一些新的标签,这些标签用于定义网页内容的结构和语义,相比于以前的HTML版本,HTML5标签提供了更加语义化的元素,本文就给大家介绍HTML5标签正确的使用方式,需要的朋友可以参考下

meta标签name="referrer"属性简介和用法小结

HTML标签name="referrer"属性主要用于控制网页发送给服务器的referrer信息,可以告诉服务器端用户是从哪个页面来到当前网页的,本篇文章给大家介绍meta标签name="referrer"属性简介和用法小结,感兴趣的朋友跟随小编一起看看吧

elementUI中el-date-picker如何禁用指定日期之前或之后的日期

这篇文章介绍elementUI中el-date-picker禁用指定日期之前或之后的日期,通过配置picker-options配置指定禁用日期(pickerOptions写到data里面),感兴趣的朋友跟随小编一起看看吧

基于MUI框架使用HTML5实现的二维码扫描功能

这篇文章主要介绍了基于MUI框架使用HTML5实现的二维码扫描功能,需要的朋友可以参考下

html5项目实现扫描二维码功能

扫描二维码是很常见的一种功能,本文就来介绍一下html5项目实现扫描二维码功能,具有一定的参考价值,感兴趣的可以了解一下

返回分类 返回首页