公司有个需求，需要获取用户的位置，所以看了下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. Python3 数据类型-集合

    在Python中集合set是基本数据类型的一种,它有可变集合(set)和不可变集合(frozenset)两种.创建集合set.集合set添加.集合删除.交集.并集.差集的操作都是非常实用的方法. 集合 ...

  2. POJ 1741 Tree（树的分治）

    Description Give a tree with n vertices,each edge has a length(positive integer less than 1001). Def ...

  3. ZOJ 2760 How Many Shortest Path（最短路径+最大流）

    Description Given a weighted directed graph, we define the shortest path as the path who has the sma ...

  4. 最全NB-IoT/eMTC物联网解决方案名录汇总

    NB-IoT/eMTC等蜂窝物联网技术的成熟和商用,占据低功耗广域网络(LPWAN)的主流地位,推动全球物联网新一轮发展热潮,越来越多的行业开始采用物联网方案来解决解决实际问题.实现落地应用,越来越多 ...

  5. defineporperty 的使用 设置对象的只读或只写属性

    <!DOCTYPE html> <html lang="en"> <head> <title>Document</title& ...

  6. 自测之Lesson10：管道

    题目:建立双向管道,实现:父进程向子进程传送一个字符串,子进程对该字符串进行处理(小写字母转为大写字母)后再传回父进程. 实现代码: #include <stdio.h> #include ...

  7. Java微笔记（3）

    Java 中的 static 使用之静态变量 Java 中被 static 修饰的成员称为静态成员或类成员. 它属于整个类所有,而不是某个对象所有,即被类的所有对象所共享. 静态成员可以使用类名直接访 ...

  8. 【python】 可迭代对象、迭代器、生成器

    可迭代对象 iterable 可直接作用于for循环的对象统称为可迭代对象. 有 list. dict.tuple.set.str等数据类型,还有 generator(包括生成器和带yield的gen ...

  9. bzoj3782上学路线

    题意:从n*m网格图的左下角走到右上角(n,m<=10^10),有t个坐标不能经过(t<=200),只能向上向右走,问有多少种不同的走法,对p取模, p只有两种取值,1000003(质数) ...

  10. datepicker约束开始时间和结束时间

    datepicker约束开始时间和结束时间作用就是:选择要搜索的日期范围. <!DOCTYPE html> <html lang="en"> <hea ...