包含了以下功能：
(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. 嵌入式Linux的调试技术

    本节我们研究嵌入式Linux的调试技术,对于复杂的Linux驱动及HAL等程序库,需要使用各种方法对其进行调试.刚开始讲了打印内核调试信息:printk,这个函数的用法与printf函数类似,只不过p ...

  2. SQL Server 检测到基于一致性的逻辑 I/O 错误 校验和不正确 ||尝试在数据库 5 中提取逻辑页 (1:1640) 失败

    use test go ALTER DATABASE test SET SINGLE_USER DBCC CHECKDB (test, repair_allow_data_loss) with NO_ ...

  3. Python学习之路二

    今天主要学习了列表,python的列表真的事太强大了,由于内容比较多,今天就先简单的介绍一下新学的几个成员函数吧. 首先我们要了解list是一种序列类型,其构造方式有四种形式: (1)空列表 [] ( ...

  4. 手把手教你在ubuntu上安装apache和mysql和php

    1:首先安装apache:打开终端(ctrl+Alt+t), 输入命令:sudo apt-get install apache2即可安装, 安装完后,打开浏览器,在地址栏输入:localhost或者h ...

  5. ruby环境的配置

    安装 Ruby 解析器 一些Linux发行版本,MacOSX操作系统都自带Ruby解析器,但是我仍然建议自行下载ruby源代码编译安装.因为一方面可以自己定制ruby安装的路径,另一方面可以在编译过程 ...

  6. javafx之HTTP协议交互

    javafx端要获取获取如下信息: 服务器端获取的数据: javafx客户端发送的数据以及获取的数据: 工程目录: package Httputil; import IPsite.IPaddress; ...

  7. output和returnvalue的作用

    贴两段代码. 1> public int ExecuteNonQuery(string pro, MobileOrder or)        {            SqlParameter ...

  8. 在VBA中调用excel函数

    以前不太会用VBA时,都是在excel中使用函数来计算一些数据.毕竟函数不如代码,效率比较低.所以,就学着怎么在VBA中引用Excel函数.平时我用得比较多的函数就是countif和sumif函数.1 ...

  9. 366. Find Leaves of Binary Tree

    Given a binary tree, collect a tree's nodes as if you were doing this: Collect and remove all leaves ...

  10. html基础01

    一.HTML 基础 1.HTML基础标签:<head> <bady> <tittle>XXX<tittle>:为标签 2.HTML标题 <h1&g ...