包含了以下功能：
(1)通过IP地址获取城市地址（并不完全准确，存在代理IP或IP中转时定位与实际位置不一致的情况）
(2)通过移动端浏览器及GPS定位位置坐标
(3)根据位置坐标转换百度地图坐标
(4)根据位置坐标逆推城市具体地址功能（存在一定误差）
(5)通过使用百度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">
        var map;
        var gpsPoint;
        var baiduPoint;
        var gpsAddress;
        var baiduAddress;

function getLocation() {
            //根据IP获取城市
            var myCity = new BMap.LocalCity();
            myCity.get(getCityByIP);

//获取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;
            map = new BMap.Map("map");
            //alert("坐标经度为：" + latitude + "， 纬度为：" + longitude );
            gpsPoint = new BMap.Point(longitude, latitude);    // 创建点坐标
            map.centerAndZoom(gpsPoint, 15);

//根据坐标逆解析地址
            var geoc = new BMap.Geocoder();
            geoc.getLocation(gpsPoint, getCityByCoordinate);

BMap.Convertor.translate(gpsPoint, 0, translateCallback);
        }

translateCallback = function (point) {
            baiduPoint = point;
            var geoc = new BMap.Geocoder();
            geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);
        }

function getCityByCoordinate(rs) {
            gpsAddress = rs.addressComponents;
            var address = "GPS标注：" + gpsAddress.province + "," + gpsAddress.city + "," +

gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetNumber;
            var marker = new BMap.Marker(gpsPoint);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
            marker.setLabel(labelgps); //添加GPS标注    
        }

function getCityByBaiduCoordinate(rs) {
            baiduAddress = rs.addressComponents;
            var address = "百度标注：" + baiduAddress.province + "," + baiduAddress.city + ","

+ baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetNumber;
            var marker = new BMap.Marker(baiduPoint);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });
            marker.setLabel(labelbaidu); //添加百度标注  
        }

//根据IP获取城市
        function getCityByIP(rs) {
            var cityName = rs.name;
            alert("根据IP定位您所在的城市为:" + cityName);
        }

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="map" style="width:600px;height:600px;"></div>
</body>
</html>

HTML5获取地理位置的更多相关文章

  1. html5获取地理位置信息API

    html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...

  2. 【Demo】HTML5获取地理位置

    HTML5获取地理位置简单实例 实例1--获取地理位置的经纬度: <!DOCTYPE html> <html> <head>  <meta charset=& ...

  3. HTML5 获取地理位置信息

    HTML5增加的新功能,获取地理位置信息,如果浏览器支持且设备有定位功能,就能够直接使用这组API来获取当前信息位置.该Geolocation API可以应用于移动设备中的地理位置. Geolocat ...

  4. HTML5获取地理位置定位信息

    如何使用HTML5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...

  5. HTML5获取地理位置信息

    <!DOCTYPE html> <html> <head> <title>Location</title> <meta charset ...

  6. html5获取地理位置和定位

    1.H5地理位置定位功能 首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意 function getLocation(){ if (navigator.geol ...

  7. HTML5获取地理位置信息并在Google Maps上显示

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  8. jQuery Mobile + HTML5 获取地理位置信息

      这个代码也非常简单,核心是HTML5中GeoLocation API,函数原型定义如下: void getCurrentPosition(in PositionCallback successCa ...

  9. Html5 Geolocation获取地理位置信息

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

随机推荐

  1. centos7 jexus在vmware下能访问，主机访问不了解决方案

    能PING通,访问不了web,先在CMD测试telnet ip 80看看是否是防火墙的问题. 修改防火墙,打开指定端口 1 安装iptables [root@centos ~]# yum instal ...

  2. “如何稀释scroll事件”的思考(不小心写了个异步do...while)

    看了下园友的一帖子:http://www.cnblogs.com/xzhang/p/4145697.html#commentform 本来以为是很简单的问题,但仔细想想还挺有意思的.简单的说就是增加事 ...

  3. Ant 安装

    今天介绍一下Ant的安装,在开始安装之前,还有一些工作需要做.如果你是Java开发者,那么你需要确认正确安装了JDK,并且配置好了Java的环境变量,如果你是Android开发者,那么你还要确认安装了 ...

  4. LR一个简单的流程

    1.录制脚本 2.回放脚本 :回放前的运行时设置:run_time_seting   F4 关联设置(动态值) 日志分析 3.脚本的增强: 添加事物(计时) 参数化(模拟真实的用户行为) 内容检查.回 ...

  5. 如何判断js中的数据类型？

    js六大数据类型:number.string.object.Boolean.null.undefined string: 由单引号或双引号来说明,如"string" number: ...

  6. EF实体框架数据操作基类（转）

    //----------------------------------------------------------------// Copyright (C) 2013 河南禄恒软件科技有限公司 ...

  7. 生成linux shadow文件

    -salt $(< /dev/urandom ) -stdin $$cVcjk1yK$sfdBsYIEr800Mdr3PsICe0 $$oBrzawaF$WeVJjd2eyoEEmJykNtMH ...

  8. ldap日志

    要开启openldap的日志功能是非常简单的:1.在slapd.conf中加一行:loglevel        4095      2.在/etc/rsyslog.conf 中加入ldap日志文档: ...

  9. GZipStream 压缩和解压

    GZipSteam: GZip 数据格式,它使用无损压缩和解压缩文件的行业标准算法 类 GZipStream有两种模式:CompressionMode.Compress和CompressionMode ...

  10. C语言文法分析

    程序 → <外部声明>|<程序><外部声明> <外部声明> → <函数定义> | <声明> <函数定义> → < ...