网页获取用户位置信息的办法
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. 逃出克隆岛 (codevs 2059)

    较普通的走迷宫的题 传送门 :codevs 2059 逃出克隆岛 思路 :BFS 即可    PS :传送门 不必重复使用 #include <iostream> #include < ...

  2. JavaEE XML DOM解析

    DOM解析XML @author ixenos XML解析方式(原理) a)     DOM 解析树 b)     SAX  流事件 DOM解析对应主流工具 i.          DOM(官方) i ...

  3. Spark Wordcount

    1.Wordcount.scala(本地模式) package com.Mars.spark import org.apache.spark.{SparkConf, SparkContext} /** ...

  4. 在ubuntu14.04上安装openstack mitaka

    最近在工作环境安装部署了juno版本,在GE口测试网络性能不太满意,发现mitaka版本支持ovs-dpdk,于是抽时间安装实验一番. 参考官网的安装文档,先准备将mitaka版本安装好再配置ovs. ...

  5. CodeForces 706D Vasiliy's Multiset

    字典树. 比较经典的题目了.把每一个数字都插入到字典树中,询问的时候如果$x$的第$i$位是$p$,那么尝试着在字典树上往$pXOR1$的节点走下去,没有$pXOR1$节点的话再走$p$的.删除操作的 ...

  6. JDK各版本新增的主要特性

    JDK1.5新特性: 1.自动装箱与拆箱: 2.枚举 3.静态导入,如:import staticjava.lang.System.out 4.可变参数(Varargs) 5.内省(Introspec ...

  7. HDU 4520 小Q系列故事——最佳裁判

    Time Limit : 500/200ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Problem Description 过 ...

  8. 【1】ShopNC 模仿笔记(一)

    不断学习,人生将会成功. 1. 序 一直想模仿一个整套的商城, 今天在shopNC 里面看到了想要的一切, 所以把一些组件, 命名规范等记录下来, 提高以后的开发效率. 官方网站 PC : shopN ...

  9. TDD(测试驱动开发)的推广方法论

  10. 最新Node.js 资源汇总

    Node.js 资源汇总 文档 Node.js 官方文档:http://nodejs.org/api/ Node.js 中文文档:http://nodejs.jsbin.cn/api/ Express ...