网页获取用户位置信息的办法
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. CODEFORCES-PROBLEMSET

    1A 水题   然而看不仔细爆int了 c++ #include <bits/stdc++.h> using namespace std; typedef long long ll; in ...

  2. CountDownLatch使用详解

    正如每个Java文档所描述的那样,CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.在Java并发中,countdownlatch的概念是一 ...

  3. 使用visualvm 远程监控 JVM

    1. 测试环境 Ubuntu Server 10.01 2.  在服务器上安装 jstatd 组件 使用apt-get 命令安装 openjdk 即可 : sudo apt-get install o ...

  4. Winform_devexpress开发框架主界面设计

    做了好多年的C#开发,从.Net.Winform及第三方的DevExpress.无论什么样的系统,主界面的设计及风格无疑非常重要.从客户的角度考虑,要求功能区清晰,整体美观大方,这样才会有可能从第一视 ...

  5. java操作mongodb——连接数据库

    import com.mongodb.MongoClient; MongoClient mongoClient = new MongoClient(); 连接MongoDB实例,默认为localhos ...

  6. [HMLY]1.CocoaPods详解----使用

    作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/18737437 转载请注明出处   一.什么是cocoaPods 1.为 ...

  7. 递归——CPS（三）

    JScript不是天然支持CPS,但是可以写一个分发引擎使得能工作在CPS风格下.一般只有一个活动的continuation,所以可以定义规则:JScript CPS 函数允许有返回,但是它们做的最后 ...

  8. 5.MyBaits调用存储过程

    1.创建一个javaweb项目MyBatis_Part4_Procedure 2.在src下创建procedure.sql文件 --创建表 create table p_user( id number ...

  9. spring 四种依赖注入方式以及注解注入方式

    平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程 ...

  10. git在webstorm中的使用

    打开webstorm新建项目,这里新建的项目名称我起为lianxi 打开设置选项里的插件栏 搜索gitignore,并安装,我这里已安装,所以显示X,没有安装的会显示一个绿色的下载箭头.安装完后需要重 ...