公司有个需求，需要获取用户的位置，所以看了下html5的Geolocation 这个新东西，发现挺好用的。

<!DOCTYPE html>

<html>

<body>

<p id="demo">点击这个按钮，获得您的坐标：</p>

<button onclick="getLocation()">试一下</button>

<script>

var x=document.getElementById("demo");

function getLocation()

  {

  if (navigator.geolocation)

    {

    navigator.geolocation.getCurrentPosition(showPosition);

    }

  else{x.innerHTML="Geolocation is not supported by this browser.";}

  }

function showPosition(position)

  {

  x.innerHTML="Latitude: " + position.coords.latitude +

  "<br />Longitude: " + position.coords.longitude;

  }

</script>

</body>

</html>

　　上面代码运行后，先会弹出，是否允许获取您的当前地理位置，如果你点击确定，那么就会得到你当前位置的坐标，那么我们就可以把这个坐标显示到地图上了。

最好是用高德地图的，因为高德地图的坐标和谷歌地图的坐标是一致的，不需要进行坐标转换，百度地图就不行，需要转换坐标，又是一大堆代码。

使用html5的Geolocation API实现定位的更多相关文章

  1. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  2. HTML5 Geolocation API地理定位整理（一）

    HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...

  3. Geolocation API

    Geolocation API--地理定位 navigator.geolocation getCurrentPosition() 触发请求用户共享地理定位信息的对话框 接收3个参数: 1.成功回调函数 ...

  4. html5 geolocation配合百度地图api实现定位

    1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用时 ...

  5. HTML5地理定位-Geolocation API

    HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息Geolocation API使用方法:1.判断是否支持 navigator.geol ...

  6. html5 geolocation API

    清单 1. 检查浏览器支持性if (navigator.geolocation) 清单 2. 单次定位请求 API void getCurrentPosition(updateLocation, op ...

  7. HTML5 Geolocation API工作原理[转载]

    大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小 ...

  8. HTML5 学习06——Geolocation（地理定位）

    HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...

  9. HTML5 Geolocation用来定位用户的位置。

    HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...

随机推荐

  1. 259 [LeetCode] 3Sum Smaller 三数之和较小值

    题目: Given an array of n integers nums and a target, find the number of index triplets i, j, k with 0 ...

  2. Paper Reading - Show, Attend and Tell: Neural Image Caption Generation with Visual Attention ( ICML 2015 )

    Link of the Paper: https://arxiv.org/pdf/1502.03044.pdf Main Points: Encoder-Decoder Framework: Enco ...

  3. 【转】NodeJS on Nginx: 使用nginx反向代理处理静态页面

    最近OurJS后台已经从纯node.js迁移到了Nginx+NodeJS上来了,感觉性能提升了不少,特与大家分享. Nginx ("engine x") 是一个高性能的 HTTP ...

  4. JavaScript初探系列之面向对象

    面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义J ...

  5. iOS- 显示数据列表最常用的一个控件UITableView

    相信做过iOS的程序员,最熟悉的控件一定少不了UITableView,最常用的控件也一定少不了UITableView! 今天分享一下自己对UITableView的实现大体思路,和整理出来的学习笔记! ...

  6. vs中编译连接时的警告屏蔽

    编译警告类型为warning C4996的形式 可以采用的#pragma warning(disable:4996)屏蔽掉这种编译警告 连接警告类型为warning LNK4049的形式 这是由于不同 ...

  7. 创建 cordova 项目

    1. 安装 node.js 2.安装 cordova : npm install -g cordova 3.创建 安卓项目: cordova create <项目路径>  <包名&g ...

  8. asp.net中缓存的使用

    刚学到asp.net怎么缓存,这里推荐学习一下 www.cnblogs.com/wang726zq/archive/2012/09/06/cache.html http://blog.csdn.net ...

  9. Mybatis笔记二

    一对一查询 案例:查询所有订单信息,订单信息中显示下单人信息. 注意:因为一个订单信息只会是一个人下的订单,所以从查询订单信息出发关联查询用户信息为一对一查询.如果从用户信息出发查询用户下的订单信息则 ...

  10. matlab 中try/catch语句

    try的作用是让Matlab尝试执行一些语句,执行过程中如果出错,则执行catch部分的语句,其语法: try (command1)组命令1总被执行,错误时跳出此结构 catch (command2) ...