网页获取用户位置信息的办法
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. WPF 后台绑定样式

    private ContentControl cc = null; private void muiscPlay(object sender, RoutedEventArgs e) { string ...

  2. chrome ipc 网摘

    http://my.oschina.net/myspaceNUAA/blog/81632?p=1 http://lihuan623.blog.163.com/blog/static/138595845 ...

  3. centos下安装Jenkins轻松搞定

    jenkins安装步骤如下: 命令:yum -y list java* yum -y install java-1.7.0-openjdk.x86_64                         ...

  4. makefile文件知识点记录

    1赋值 = 是最基本的赋值:= 是覆盖之前的值?= 是如果没有被赋值 += 是添加等号后面的值 1.“=” make会将整个makefile展开后,再决定变量的值.也就是说,变量的值将会是整个make ...

  5. Minicom配置及使用详解

    因为现在电脑基本不配备串行接口,所以,usb转串口成为硬件调试时的必然选择.目前知道的,PL2303的驱动是有的,在dev下的名称是ttyUSB*. minicom,tkterm都是linux下应用比 ...

  6. vedio_note2

    例化 for example ex_cnt ex_cnt_inst( //模块名 例化的名字 .clk(ckl_o), // . 后面是原模块的名字 括号里面是top里的名字 .rst_n(rst_n ...

  7. idea空包自动叠加问题

    取消上面选项就行了.

  8. 【 VS 插件开发 】三、Vs插件简单功能的实现

    [ VS 插件开发 ]三.Vs插件简单功能的实现

  9. 快速掌握LODOP打印使用方法

    用运之前简单介绍几个东西. install_lodop32.exe与install_lodop64.exe这两个是2个网页打印控件,网页打印必须安装这个控件在客户端,分为32和64位安装控件.(如果自 ...

  10. Spring Security（18）——Jsp标签

    目录 1.1     authorize 1.2     authentication 1.3     accesscontrollist Spring Security也有对Jsp标签的支持的标签库 ...