参考教程：http://www.w3school.com.cn/html5/html_5_geolocation.asp

说明:设备必须有GPS定位功能才能定位的

定位用户的位置

HTML5 Geolocation API 用于获得用户的地理位置。

<!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的定位还比较准，我在Android与iphone上都有测试过，另外这种定位方式也比较简单

HTML5学习(七)----地理定位的更多相关文章

  1. HTML5 学习之地理定位

    html5 获取坐标: <!DOCTYPE HTML> <html> <head> <title>test1.html</title> &l ...

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

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

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

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

  4. HTML5: HTML5 Geolocation（地理定位）

    ylbtech-HTML5: HTML5 Geolocation(地理定位) 1.返回顶部 1. HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位 ...

  5. HTML5 Geolocation（地理定位）

    一.背景 在HTML规范中,增加了获取用户地理信息的API,这样使得可以基于用户位置开发互联网应用,即基于位置服务 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. Inter ...

  6. HTML5学习总结-03 地理定位

    一 地理定位 HTML5 Geolocation(地理定位)用于定位用户的位置. 1 地理定位 地理位置 经度  :   南北极的连接线 纬度  :   东西连接的线 位置信息从何而来: IP地址 G ...

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

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

  8. HTML5学习笔记 Geolocation（地理定位）

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

  9. 手机端网页使用html5地理定位获取位置失败的解决办法

    网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...

随机推荐

  1. sersync 实时同步工具

    出处:http://code.google.com/p/sersync/ 当前版本的sersync依赖于rsync进行同步.如下图所示,在同步主服务器上开启sersync,将监控路径中的文件同步到目标 ...

  2. AvalonDock 2.0 的简单运用

    最近在研究AvalonDock的一些使用,碰到了一些问题.现在拿出来跟大家分享分享. 网上找了一大把AvalonDock 1.3版本的资料,弄出Demo后发现属性面板(DockableContent) ...

  3. Django 下static的配置

    1.添加一个BASE_DIR在setting.py中,如果已存在可不用添加,需引入 import os BASE_DIR = os.path.dirname(os.path.dirname(os.pa ...

  4. AJAX 原理（转摘）

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

  5. linux标准输入输出重定向

    command > filename 把标准输出重定向到一个文件,如果文件不存在则新建,如果存在则覆盖其内容.command >> filename 把标准输出重定向到一个文件中,如 ...

  6. PHP webserver 之 soap non-wsdl

    non-wsdl 顾名思义就是不使用wsdl文件进行的webserver服务 事实上个人觉得用wsdl模式还不如使用non-wsdl模式,wsdl模式稍加麻烦! 1.网站运行环境下开启soap模块(p ...

  7. 微软职位内部推荐-Senior Engineering Lead

    微软近期Open的职位: Job Title: Senior Engineering LeadDivision: Microsoft Business SolutionWork Location: S ...

  8. 使用nodejs搭建服务器显示HTML页面

    首先安装express 在命令行输入:npm install express -g 安装完成后可以查看安装情况:npm ls -g 然后创建server.js文件 var express = requ ...

  9. 团体程序设计天梯赛-练习集L1-009. *N个数求和

    L1-009. N个数求和 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 本题的要求很简单,就是求N个数字的和.麻烦的是,这些 ...

  10. SDUT 2523 OOXX

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2523 思路 :就是先统计一下方阵中1多少2多少 ...