最近公司项目需要做一个类似微信朋友圈的互动交友功能,需要显示用户位置信息,因此在网上查了部分资料,记下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. Xdebug的安装、配置和使用

    对于我这么一个渣渣php码农,平时总觉得echo.var_dump.print_r就能满足我的调试需求了,最近公司开始一个新项目,要大量阅读调试旧的源码,echo和var_dump开始不够用了,于是装 ...

  2. C语言实现strcmp()和strcpy()函数

    #include <stdio.h> #include <assert.h> char *strcpy(char *strDest, const char *strScr) { ...

  3. 3.3－ISDN

    3.3-ISDN     综合业务数字网ISDN(Integrated Services Digital Network):     ISDN主要有两种接口类型:分为BRI(2B+D=2×64+16K ...

  4. 【POJ3074】Sudoku DLX（Dancing Links）

    数独就要DLX,不然不乐意. 数独的DLX构造:9*9个点每一个点有9种选择,这构成了DLX的729行,每行.列.阵有限制,均为9行(/列/阵),然后每行(/列/阵)都有九种数的情况.于是就有了3*9 ...

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

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

  6. [android]Xutils具体介绍

    什么是Xutils xUtils 包括了非常多有用的android工具,xUtils 源于Afinal框架,对Afinal进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持, ...

  7. java(JSP)中几种获取项目路径方式

    在jsp和class文件中调用的相对路径不同. 在jsp里,根目录是WebRoot 在class文件中,根目录是WebRoot/WEB-INF/classes 当然你也可以用System.getPro ...

  8. 【Eclipse提高开发速度-插件篇】安装VJET插件，JS等提示开发插件

    1.安装Apache Batik CSS 一般安装VJET插件会出现 Cannot complete the install because one or more required items co ...

  9. 【POJ 2777】 Count Color（线段树区间更新与查询）

    [POJ 2777] Count Color(线段树区间更新与查询) Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4094 ...

  10. 分享tiny4412,emmc烧录u-boot, 支持fastboot模式烧写emmc【转】

    本文转载自:http://www.arm9home.net/read.php?tid-80810.html 分享tiny4412,emmc烧录u-boot, 支持fastboot模式烧写emmc   ...