公司有个需求，需要获取用户的位置，所以看了下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. java超强分页标签演示

    最近在做一个项目,用到了一个分页,于是动手写了个分页标签,先将代码贴出来,供大家交流,写的不好,请见谅!. 以下是java标签类,继承自SimpleTagSupport package com.lyn ...

  2. Python中的from等价于import的语法

    Python中导入module文件有两种方式:import和from.这里并不会列举import和from的具体使用方法,而是比较两者之间的差别. 对于from语句来说,它其实是等价于下面的impor ...

  3. 《安装ubuntu及VMware以及相关问题汇总》

    一.VMware Ubuntu安装详细过程 http://blog.csdn.net/u013142781/article/details/50529030 二.VMware Tools (ubunt ...

  4. Android之Bluetooth编程

    Android Bluetopth 编程大牛文章 http://my.oschina.net/u/994235/blog?catalog=313604 ViewGroup 相关资料 : http:// ...

  5. 【week2】四人小组项目（WBS、NABCD）

    项目选题:东北师范大学论坛 小组名称:nice! 项目组长:李权 组员:于淼 刘芳芳 杨柳 本周任务:要求给出需求概述.功能列表.痛点或亮点.NABCD及WBS模型在此项目中的应用. 作为东北师范大学 ...

  6. NeoLoad系列- 快速上手教程

    1.新建工程 2.点击录制脚本按钮 3.在弹出的开始录制对话框中,填写虚拟用户信息. Record in下拉框,用来填写用户路径,一般有三个容器组成: Init, Actions, and End.当 ...

  7. C# 4 中使用迭代器的等待任务

    介绍 可能你已经阅读 C#5 关于 async 和 await 关键字以及它们如何帮助简化异步编程的,可惜的是在升级VS2010后短短两年时间,任然没有准备好升级到VS2012,在VS2010和C#4 ...

  8. name（实例化类名）.hbm.xml文件案例

    [html] view plain copy print? <span xmlns="http://www.w3.org/1999/xhtml"><?xml ve ...

  9. Redis 学习之主从复制

    该文使用centos6.5 64位    redis3.2.8 主从复制 Redis的复制功能是支持多个数据库之间的数据同步.一类是主数据库(master)一类是从数据库(slave),主数据库可以进 ...

  10. 【bzoj4550】小奇的博弈 博弈论+dp

    题目描述 这个游戏是在一个1*n的棋盘上进行的,棋盘上有k个棋子,一半是黑色,一半是白色.最左边是白色棋子,最右边 是黑色棋子,相邻的棋子颜色不同.   小奇可以移动白色棋子,提比可以移动黑色的棋子, ...