现在互联网中有了越来越多的地理位置服务，正在制定中的HTML5规范也试图在浏览器中内置嵌入地理位置共享服务，而且幸运的是，我们已经能够在Firefox 3.5+、Chrome 5.0+、Opera 10.60+、Safari 5.0+ 以及一些移动终端，注入IPhone、Android上使用这项服务，那么这个服务能否有Mapabc的API结合，来实现用户的地理定位呢？

传统上，地图应用上为用户定位的方式一般是：

用户访问时获得用户的IP。
用这个IP到IP库中匹配用户的城市信息。
根据获取的城市信息去已有的城市中心点字典中进行匹配。
匹配完成后将用户地图的中心点进行相应的切换。

这个过程繁琐，而且准确性极大程度上依赖于我们IP库的准确程度。现在有了浏览器的位置共享服务，我们可以更容易的实现用户的地理定位。

Geolocation对象介绍

正如开头所讲的，到目前为止，W3C中deGeolocation API规范已经在非IE的浏览中得到了实现。规范中提到，浏览器提供位置信息的来源是不固定的，可能是GPS、也可能来自于IP地址、RFID、WiFi、蓝牙或者GSM\CDMA的定位信息，也不保证返回的结果一定准确。Geolocation的API同时对“只获得一次”定位和“持续监督”定位都做出了规定。

Geolocation的一些方法

Geolocation对象位于浏览器Navigator对象下，可以通过 navigator.geolcation 来访问，不支持 geolocation 的浏览器不会包含这一对象，不会造成错误，可以用来做浏览器的区分。

if ( navigator.geolcation ){

alert(‘ Your Browser dosent support geolcocation ');

} else{

alert(‘ Your Browser support geolocation’);

}

在访问 geolocation 对象时，浏览器会进行提示，询问用户使用许可对网站提供位置服务，得到用户的许可后，访问才会继续，否则会被停止。而且，我们可以捕捉到用户同意或者拒绝的事件。

在获得用户的学科之后，就可以利用Geolocation获取当前位置，核心方法如下：

navigator.geolocation.getCurrentPosition( getPositionSuccess , getPositionError );

上面的代码中，调用了 getCurrentPosition 方法，并且传递了两个回调函数的参数，分别用来处理位置获取成功和失败时的情况。实事上，这个函数还可以接受第三个参数，用来传入一些配置信息，包括对于超时的设置等。下面来看两个获取成功和获取失败时，回调函数的处理。

获取地理信息成功的错误处理信息

function getPositionSuccess ( position ) {

var lat = position.coords.latitude;

var lng = position.coords.longitude;

alert( ‘Now you are lat – lng ‘);

}

获取地理位置失败的回调函数

function getPositionError( error ){

switch(error.code)

case error.TIMEOUT;

//Do something

break;

case error.PERMISSION_DENIED;

//Do something

break;

case error.POSITION_UNAVAILIABLE;

//Do something

break;

}

获取地理位置信息的配置变量。在填入获取地理位置信息变量时，能够对获取地理位置的一些细节进行影响。下面是目前包括的几个具体参数

In ECMAScript, the enableHighAccuracy, timeout and maximumAge properties are all optional: when creating a PositionOptions object, the developer may specify any of these properties.

刚才也提到，我们还可以对地理位置进行持续的追踪，这是需要用到 watchPosition 方法。

因为对于移动设备的用户来说，位置并不是固定的，我们需要来处理这种移动客户端的情况，而不是每次要提醒用户去刷新浏览器来更新位置。

navigator.geolocation.watchPosition( refreshPosition );

与Mapabc API的整合

看完上面的关于 geolocation 的介绍之后，我们就可以将这个服务与Mapabc API一起，整合到我们的应用中了。下面是一个具体的实现样例，供参考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
    <div id="mapobj" style="width:500px; height:500px; border:1px solid black;"></div>
    <div id="info"></div>
    <input type="button" id="getPos" value="Get My Position" />
</div>
<script src="http://app.mapabc.com/apis?&t=flashmap&v=2.3.4&key=0c3235346b1e00772eafe1c099f4b23fe5ec1202d393f952395e628567934baceedcaf1508ea044f" type="text/javascript"></script>
<script type="text/javascript">
    function getPositionSuccess( position ){
        var lat = position.coords.latitude;
        var lng = position.coords.longitude;
        //alert( "您所在的位置： 经度" + lat + "，纬度" + lng );

var mapOptions = new MMapOptions();//构建地图辅助类
        mapOptions.zoom=13;//设置地图zoom级别
        mapOptions.center=new MLngLat(lng,lat);   //设置地图中心点
        mapOptions.toolbar = MINI;//工具条
        mapOptions.toolbarPos = new MPoint(15,15);  //工具条偏移
        mapOptions.overviewMap = SHOW;//是否显示鹰眼
        mapOptions.scale = SHOW;//是否显示比例尺
        mapOptions.returnCoordType = COORD_TYPE_OFFSET;//返回偏移明码坐标
        mapOptions.zoomBox = true;//鼠标滚轮缩放和双击放大时是否有红框动画效果。
        mapabc.map=new MMap("mapobj",mapOptions); //地图初始

if(typeof position.address !== "undefined"){
                var country = position.address.country;
                var province = position.address.region;
                var city = position.address.city;
                alert(' 您位于 ' + country + province + '省' + city +'市');
        }
    }

function getPositionError( error ){
        switch(error.code){
            case error.TIMEOUT :
                alert( " 连接超时，请重试 " );
                break;
            case error.PERMISSION_DENIED :
                alert( " 您拒绝了使用位置共享服务，查询已取消 " );
                break;
            case error.POSITION_UNAVAILABLE :
                alert( " 亲爱的火星网友，非常抱歉，我们暂时无法为您所在的星球提供位置服务 " );
                break;
        }
    }

var dom = {
        btn    : document.getElementById("getPos"),
        info: document.getElementById("info"),
        map    : document.getElementById("mapObj")
    };

var mapabc = {
        map        : null,
        marker    : null
    };

dom.btn.onclick = function(){
        if( navigator.geolocation ){
            dom.info.innerHTML = "Waiting for the geolocation result...";
            navigator.geolocation.getCurrentPosition( getPositionSuccess, getPositionError );       
        } else {
            dom.info.innerHTML = "Your browser doesn't support geolocation.";
        }
    }
</script>
</body>
</html>

上面的代码，会在地图显示后询问用户是否共享位置信息，如果共享则会切换地图中心点到相应的位置。当然，我们可以在自己的应用中更加灵活的使用位置共享服务，既然有了这么 Cool 的服务支持，我们还等什么呢。

参考资料：

1、Blueidea BBS
2、Geolocation API Specification
3、Mapabc API

转载于:https://www.cnblogs.com/cocowool/archive/2010/08/31/1813191.html

利用MapabcAPI实现基于浏览器的地理定位相关推荐

  1. geoip java api_利用GeoIP数据库及API进行地理定位查询 Java

    地理定位查询的的数据库比较多,而且大多都开放一些free的版本 国内的有纯真数据库等,但是他只提供文本的地理位置信息,不提供经纬度数据 当应用到google map时,就不可以了 国外的有MaxMin ...

  2. HTML5+百度地图API实现地理定位

    背景 如果知道用户在哪里,往往会提高很多Web应用的体验,比如为用户指明方向,对它们要去的地方给出建议,让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等.现在,利用HTML5(以及基于Ja ...

  3. html定位的实例,H5案例分享：基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  4. html5经纬度定位 源码_基于浏览器的HTML5地理定位

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个 ...

  5. chrome浏览器模拟手机 地理定位

    chrome浏览器模拟手机 地理定位 在pc端做touch页面调试的时候,常常会遇到需要模拟定位的情况 chrome浏览器有着强大的调试工具,尤其是新版chrome浏览器 下面我就以新版chrome浏 ...

  6. 如何用html5定位,如何利用html5进行地理定位

    满意答案 ggk666 2017.10.13 采纳率:57%    等级:9 已帮助:413人 HTML5 Geolocation(地理定位)用于定位用户的位置 点击这个按钮,获得您的位置: 试一下 ...

  7. HTML5 新特性 - 地理定位（基于高德地图API）

    定位的基础与原理 IP定位 运营商基站定位 GPS定位 地理定位的实现 地理定位API允许用户向web应用程序提供他们的位置(经纬度).但是这个操作需要用户授权. 获取地理定位的相关代码如下: let ...

  8. html浏览位置坐标,HTML5教程 | HTML5地理定位（GeoLocation API）

    HTML5 GeoLocation API(地理定位API)可以获取用户所在的地理位置.由于安全的原因,在使用HTML5 GeoLocation的时候,会弹出对话框让用户决定是否共享他们所在的位置,只 ...

  9. 3 地理位置定位_IP地理定位API的十大用途和应用

    地理定位是一个广泛的术语,指的是一种技术,这种技术允许企业精确定位任何与公司网络互动的个人的物理位置.它包含全球定位系统(GPS)和IP地址空间,本文主要分析后者. 实际上,任何行业都可以从地理定位中 ...

  10. 联合使用 HTML 5、地理定位 API

    查找并跟踪位置坐标以用在各种 Web 服务中 在这个由五个部分所组成的系列的第一部分中,您将接触到移动 Web 应用程序中最流行的新技术:地理定位.高端智能手机都内置 GPS,现在您将了解 Web 服 ...

最新文章

  1. 关于String字符串的常用操作。（持续更新中）
  2. python装饰器函数-Python函数装饰器指南
  3. Keras学习代码—github官网examples
  4. 【机器学习】降维技术-PCA
  5. js(Dom+Bom)第七天（1）
  6. 试戴系统完全开放—zoomla!逐浪cms在后4.6时代的又一个亮点
  7. CentOS启动报错：Centos kernel panic-not syncing:VFS:Unable to mount root fs on unknown block
  8. mysql高可用性方案(2)
  9. 安卓Aop 实现权限检测
  10. 使用 GO-CQHttp或mirai框架 搭建QQ的机器人
  11. H5游戏开发-搭建开发环境
  12. 利用泰勒展开式实现sin(x),cos(x)函数
  13. 生成树协议STP 网络冗余技术
  14. 计算机word的关闭怎么办,为什么我的计算机word文档打开和关闭缓慢
  15. 微信公众号主体注册数量提升申请方法
  16. Spark性能优化之-开发调优
  17. 放大电路①---共射极放大电路
  18. 关于MC34063的奇怪问题参考解决方案（mc34063升压失败、输出等于输入，输出电压低于输入）
  19. 2023年01月 使用win11系统自带SSH，远程控制VMware中Liunx虚拟机系统
  20. 符号“∑”和“Π”的用法。

热门文章

  1. C#使用SHA1加密类（RSAFromPkcs8）支持1024位和2048位私钥
  2. linux启动exe程序命令行参数,Linux可执行文件的启动及命令行参数和环境变量的传递...
  3. meanshift跟踪算法
  4. 计算机扫描服务开启,扫描系统（window怎么开启扫描服务）
  5. vulnhub DriftingBlues: 6
  6. Unity Shader Alpha Blend 填坑记录
  7. 关于交换机端口的Trunk和Access模式的分析与验证
  8. intel wifi 5100agn linux驱动,intel5100agn网卡驱动下载
  9. 电路设计与仿真各种类软件工具介绍
  10. 从solidWorks导出机器人URDF文件