最近公司项目需要做一个类似微信朋友圈的互动交友功能,需要显示用户位置信息,因此在网上查了部分资料,记下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. 为 Windows Phone 8.1 app 解决“The type does not support direct content.”的问题

    我在 VS 14 CTP 中新建了一个空的 app store 项目名叫 PlayWithXaml ,项目的 MainPage.xaml 文件改为了以下内容: <Page x:Class=&qu ...

  2. CODEVS——T 1700 施工方案第二季

    http://codevs.cn/problem/1700/ 2012年市队选拔赛北京  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果   ...

  3. 洛谷（cogs 1293/bzoj 1212） P2292 [HNOI2004]L语言

    1293. [HNOI2004] L语言 ★★★   输入文件:language.in   输出文件:language.out   简单对比时间限制:1 s   内存限制:162 MB [题目描述] ...

  4. MVC WebApi 将返回值改为JSON格式

    新增一个类: public class BrowserJsonFormatter : JsonMediaTypeFormatter { public BrowserJsonFormatter() { ...

  5. JobHistory搜索智能化

    前言 做过hadoop集群问题排查工作的同学一定用过JobHistory,这是一个非常好用的"利器",为什么这么说呢?正如这个工具的名称所叫的那样,这个工具能帮你找到历史Job跑过 ...

  6. python-pexpect_02ssh

    #!/usr/bin/env python """ This runs a command on a remote host using SSH. At the prom ...

  7. Ubuntu 12.04 LTS 无法进入桌面环境

    今天开机后,在登陆的时候,进入了登陆界面(选择用户,输入密码的那个界面),输入正确的密码后屏幕跳转了一下,但是很快又回到了登陆界面.然后我就尝试以guest [访客]的身份登陆,发现进入了桌面系统. ...

  8. SQL SERVER:一条SQL语句插入多条记录等

    在学习排名第二的mySql过程中,发现它的插入语句可以这样写: use test; create table fruits( fid char(10) not null ,s_id int null ...

  9. IOS 数据存储之 Core Data具体解释

    Core Date是ios3.0后引入的数据持久化解决方式,它是是苹果官方推荐使用的.不须要借助第三方框架.Core Date实际上是对SQLite的封装.提供了更高级的持久化方式.在对数据库操作时, ...

  10. C 符号表导出

    编译符号表导出示例: 使用GCC编译链接参数--version-script 控制动态符号表,如想 使用链接参数 --retain-symbols-file 控制静态符号表,--version-scr ...