网页获取用户位置信息的办法
1 调用百度地图的地图标注功能，通过百度地图API获取对应的经度和纬度进而获取地区信息
 优点是比较准确，缺点是需要用户自己选择位置
2 通过H5 geolocation属性获取经度和纬度，优点是用户只需要点击允许获取即可，缺点是浏览器获取的经度相对不是很准确而且仍旧需要用户确认。
3 通过用户IP来分析用户位置（待后续研究）

下面是第二种方法的代码实现
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>基于浏览器的HTML5查找地理位置</title>

    <!-- 百度API -->

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

    <script>

        function getLocation(){

            var options={

                enableHighAccuracy:true,

                maximumAge:1000

            }

            if(navigator.geolocation){

                //浏览器支持geolocation

                navigator.geolocation.getCurrentPosition(onSuccess,onError,options);

            }else{

                //浏览器不支持geolocation

                alert('您的浏览器不支持地理位置定位');

            }

        }

        //成功时

        function onSuccess(position){

            //返回用户位置

            //经度

            var longitude =position.coords.longitude;

            //纬度

            var latitude = position.coords.latitude;

            alert('经度'+longitude+'，纬度'+latitude);

            //根据经纬度获取地理位置，不太准确，获取城市区域还是可以的

            var map = new BMap.Map("allmap");

            var point = new BMap.Point(longitude,latitude);

            var gc = new BMap.Geocoder();

            gc.getLocation(point, function(rs){

                var addComp = rs.addressComponents;

                alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);

            });

        }

        //失败时

        function onError(error){

            switch(error.code){

                case 1:

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

                    break;

                case 2:

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

                    break;

                case 3:

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

                    break;

                case 4:

                    alert("未知错误");

                    break;

            }

        }

        window.onload=getLocation;

    </script>

</head>

<body>

</body>

</html>

HTML5根据浏览器获取经度和纬度（百度API）的更多相关文章

  1. Cesium获取经度 ，纬度，高度

    实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  2. 根据经纬度获取位置描述：百度API与高德API的区别

    百度API 使用百度坐标 1.访问方式一 http://api.map.baidu.com/geocoder/v2/?location=35.063592,118.38513&output=j ...

  3. Vue 通过调用百度API获取地理位置-经度纬度省份城市

    一.首先在百度api注册获得ak密钥 二.新建js文件,我命名为loadBMap.js,里面创建script,代码如下: /** * 加载地图 * @param {Function} callback ...

  4. html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  5. Android 获取地理位置的经度和纬度(zz)

    在Android应用程序中,可以使用LocationManager来获取移动设备所在的地理位置信息.看如下实例:新建android应用程序TestLocation. 1.activity_main.x ...

  6. Android开发之旅-获取地理位置的经度和纬度

    在Android应用程序中,可以使用LocationManager来获取移动设备所在的地理位置信息.看如下实例:新建android应用程序TestLocation. 1.activity_main.x ...

  7. 【前端】html5获取经纬度，百度api获取街区名，并使用JS保存进cookie

    引用js<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak= ...

  8. 【转】百度API获取城市名地名(附源码)

    在做一个软件时,用到了定位功能.网上有很多关于google 的GPS定位,但网上关于google定位都没有用, 搜索下原因:(这里建议大家在中国就尽量不使用系统自带的定位) 因为Google的服务器不 ...

  9. java工具类(一)之服务端java实现根据地址从百度API获取经纬度

    服务端java实现根据地址从百度API获取经纬度 代码: package com.pb.baiduapi; import java.io.BufferedReader; import java.io. ...

随机推荐

  1. 20170114 - Mac 向上一级文件夹快捷键

    以前使用XtraFinder来实现向上跳转文件夹,Mac其实自带的向上一级文件夹,只是没有那么明显, Mac下跳转上一级文件夹的快捷键是 Command + Up Arrow,即: ⌘ ↑

  2. 0-ajax操作json(番外篇)

    [可以先看后边再看此文] get获取json 前端代码 <!DOCTYPE html> <html> <head> <meta charset="u ...

  3. 第10章：DOM

  4. Oracle 视图操作

    -- 创建视图create view V_TEST asselect * from T_TEST where rownum <100 select * from V_TEST-- 新建视图用户 ...

  5. expressJS - 准备活动

    安装 nodeJS 1. package.json 2. CommonJS, AMD, ES6 3. Babel

  6. UGUI事件系统

    UGUI系统 将UI可能触发的事件分为12个类型,即EventTriggerType枚举的12个值. PointerEnter-- PointerExit-- PointerDown-- Pointe ...

  7. JsSIP.UA.JsSIP 总是返回错误:422 Session Interval Too Small

    在JsSIP 中 JsSIP.UA.call 总是 返回错误:422 Session Interval Too Small 关于错详情在这篇文章中解释的比较详尽:http://www.cnblogs. ...

  8. Rosenbrock function

    w测试最优化算法性能可通过其. https://en.wikipedia.org/wiki/Rosenbrock_function https://zh.wikipedia.org/wiki/Rose ...

  9. [Q]升级/重新获取授权步骤

    若因需要升级或授权文件失效(重装系统或其他原因),在服务期内可通过下面的步骤操作. 注:168元版提供2年升级及售后支持,118元版的提供1升级及售后支持. 步骤如下: 1. 重新获取CAD批量打图精 ...

  10. put a favicon for github pages

    put the picture "favicon.ico" in the root of your web page repo.then add the following lin ...