包含了以下功能：
(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. How to create your own custom 404 error page and handle redirect in SharePoint 分类： Sharepoint 2015-07-08 00:22 4人阅读 评论(0) 收藏

    1. In your MOSS server, make a copy of %systemdrive%\Program Files\Common Files\Microsoft Shared\Web ...

  2. glibc与MSVC CRT（转载）

    glibc与MSVC CRT 运行库是平台相关的,因为它与操作系统结合得非常紧密.C语言的运行库从某种程度上来讲是C语言的程序和不同操作系统平台之间的抽象层,它将不同的操作系统API抽象成相同的库函数 ...

  3. 灰常好的开源项目[c/c++]

    ClibPDF http://cosoft.net.cn http://www2s.biglobe.ne.jp/~Nori/ruby/dist/ClibPDF-ALPHA-20010519.tar.g ...

  4. Android Activity中获取当前焦点的控件,自动化输入EditText

    获取焦点的view对象 View view=getWindow().getDecorView().findFocus(); 如果是EditText if(view instanceof EditTex ...

  5. Android性能优化之使用线程池处理异步任务

    转:http://blog.csdn.net/u010687392/article/details/49850803

  6. sublime text 3 快捷键大全

    Sublime Text 3 快捷键精华版 Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+Shift+W:关闭所 ...

  7. Log4J日志管理类使用详解 (转)

    一.前言: log4j 是一个开放源码项目,是广泛使用的以Java编写的日志记录包.由于log4j出色的表现, 当时在log4j完成时,log4j开发组织曾建议sun在jdk1.4中用log4j取代j ...

  8. JS中setInterval与setTimeout的区别

    JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...

  9. Ruby-1

    Ruby API 文档 http://www.ruby-doc.org/core-2.0.0/ Programming Ruby http://ishare.iask.sina.com.cn/f/22 ...

  10. okHttp使用

    本文转载自:http://www.cnblogs.com/qifengshi/p/5405550.html okHttp是一个http请求框架,相当于android原生的httpclient和http ...