最近公司项目需要做一个类似微信朋友圈的互动交友功能,需要显示用户位置信息,因此在网上查了部分资料,记下demo供以后查看学习:(用到了百度api来实现定位功能)

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>地理位置测试</title>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

    <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

    <script type="text/javascript" src="jquery.1.10.1.min.js"></script>

    <script type="text/javascript">

        var gpsPoint;

        var baiduPoint;

        var baiduAddress;

        function getLocation() {

            //获取GPS坐标

            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 });

            } else {

                alert("您的浏览器不支持使用HTML 5来获取地理位置服务");

            }

        }

        function showMap(value) {

            var longitude = value.coords.longitude;

            var latitude = value.coords.latitude;

            gpsPoint = new BMap.Point(longitude, latitude);

            BMap.Convertor.translate(gpsPoint, 0, translateCallback);

        }

        translateCallback = function (point) {

            baiduPoint = point;

            var geoc = new BMap.Geocoder();

            geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);

        }

        function getCityByBaiduCoordinate(rs) {

            baiduAddress = rs.addressComponents;

            var address = baiduAddress.city + baiduAddress.district + baiduAddress.street + baiduAddress.streetNumber;

            $("#showdiv").html(address);

        }

        function handleError(value) {

            switch (value.code) {

                case 1:

                    alert("位置服务被拒绝");

                    break;

                case 2:

                    alert("暂时获取不到位置信息");

                    break;

                case 3:

                    alert("获取信息超时");

                    break;

                case 4:

                    alert("未知错误");

                    break;

            }

        }

        function init() {

            getLocation();

        }

        window.onload = init;

    </script>

</head>

<body>

    <div id="showdiv"></div>

</body>

</html>

HTML地理位置定位的更多相关文章

  1. HTML5 地理位置定位（HTML5 Geolocation）原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  2. html5 Geolocation(地理位置定位)学习

    1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...

  3. html5的地理位置定位

    html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理GPS, WIFI, IP, 手机信号基站 核心对象Geolocation是wi ...

  4. [Javascript] HTML5 地理位置定位（HTML5 Geolocation）原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  5. HTML5 地理位置定位API（3）

    HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了h ...

  6. HTML5 地理位置定位API（1）

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  7. HTML5获取地理位置定位信息

    如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...

  8. html5地理位置定位功能小析

    Geolocationd 基本原理1.GPS    GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...

  9. 使用HTML5地理位置定位到城市的方法及注意事项

    介绍 本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位.实现效果为显示出用户所在的省市,即: XXX省 XXX市. 实现思路 利用HTML5 提供的API获取到用户的 ...

  10. iOS开发-iOS8地理位置定位

    现在的App基本上都有定位功能,旅游网站根据定位推荐旅游景点,新闻App通过地理位置推荐当地新闻,社交类的App通过位置交友,iOS中实现以上功能需要一个核心的框架CoreLocation,框架提供了 ...

随机推荐

  1. 模拟赛 Problem 2 不等数列(num.cpp/c/pas)

    Problem 2 不等数列(num.cpp/c/pas) [题目描述] 将1到n任意排列,然后在排列的每两个数之间根据他们的大小关系插入“>”和“<”.问在所有排列中,有多少个排列恰好有 ...

  2. C++模板的特化与偏特化

    http://cppblog.com/SmartPtr/archive/2007/07/04/27496.html (1) 类模板定义一个栈的类模板,它可以用来容纳不同的数据类型 template & ...

  3. HDU 1853 Cyclic Tour（最小费用最大流）

    Cyclic Tour Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/65535 K (Java/Others) Tota ...

  4. 最简单的视音频播放演示样例7：SDL2播放RGB/YUV

    ===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频 ...

  5. 苹果iOS手机后门的”诊断功能论“不攻自破

    7月23日.苹果公司公布公告,题为"iOS:About diagnostic capabilities"("iOS:关于诊断功能").当中声称:iOS offe ...

  6. (寻找第K小的数&amp;&amp;寻找第K小的数的和)

    这一篇博客以一些OJ上的题目为载体,讲一下寻找第K小的数的方法 方法一: 先将数据排列好,然后,然后return a[k]或者将前K个数加起来 方法二: 基于高速排序.如,一次高速排序将某一个数放到了 ...

  7. SharePoint 2013 JavaScript 对象推断用户权限

    场 景 最近有个场景,推断当前用户对项目有没有编辑权限,使用JavaScript完毕.弄了好久才弄出来.分享一下,有须要的自行扩展吧,详细例如以下: 代 码 function getPermissi ...

  8. LeetCode 953. Verifying an Alien Dictionary (验证外星语词典)

    题目标签:HashMap 题目给了我们一个 order 和 words array,让我们依照order 来判断 words array 是否排序. 利用hashmap 把order 存入 map, ...

  9. 如何在 webpack 项目中使用绝对路径

    react 小白编程 本项目是使用 create-react-app 脚手架构建的react项目 找到 config 配置文件下的 webpack.config.dev.js 和 webpack.co ...

  10. ORACLE 11G 怎样改动 awr 的保留期限小于8天

     ORACLE 11G 怎样改动 awr 的保留期限小于8天 Oracle Database 11g 默认具备一个系统定义的Moving Window Baseline,该基线相应于 AWR 保留 ...