通过浏览器获取经纬度及城市信息(百度地图&高德地图JavaScript API)

资源:

百度地图开放平台JavaScript API v2.0类参考
百度地图开放平台JavaScript API
百度地图开放平台论坛
高德开放平台-地图-JS API-参考手册
高德开放平台 Jacascript API


高德地图定位插件

定位
插件名称 说明
AMap.Geolocation 定位插件,整合了浏览器定位、精确IP定位、sdk辅助定位多种手段位
AMap.CitySearchy 城市查询,IP定位获取当前城市信息
AMap.Geolocation 插件

AMap.Geolocation定位服务插件。融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段,提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。用户可以通过两种当时获得定位的成败和结果,一种是在getCurrentPosition的时候传入回调函数来处理定位结果,一种是通过事件监听来取得定位结果。

注:默认情况下,PC端优先使用精确IP定位,解决多数浏览器无法完成定位的现状,IP定位失败后使用浏览器定位;手机端优先使用浏览器定位,失败后使用IP定位;对于安卓WebView页面的开发者,可以结合定位sdk进行辅助定位,详细说明见useNative参数。IP定位的精度值为'null'。

由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。

代码示例
mapObj = new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation', function () {
    geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位,默认:true
        timeout: 10000,          //超过10秒后停止定位,默认:无穷大
        maximumAge: 0,           //定位结果缓存0毫秒,默认:0
        convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
        showButton: true,        //显示定位按钮,默认:true
        buttonPosition: 'LB',    //定位按钮停靠位置,默认:'LB',左下角
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
        showMarker: true,        //定位成功后在定位到的位置显示点标记,默认:true
        showCircle: true,        //定位成功后用圆圈表示定位精度范围,默认:true
        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点,默认:true
        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
    });
    mapObj.addControl(geolocation);
    geolocation.getCurrentPosition(); //精准定位
    // geolocation.getCityInfo();  //定位到城市
    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
});


Geolocation的定位流程以及定位失败的原因?

JS-API的Geolocation定位插件,融合了HTML5 Geolocation定位接口、精确IP定位服务,以及安卓定位sdk定位。其中与安卓定位sdk的结合使用适用于开发安卓系统的H5应用,需同时使用安卓定位sdk和JS-API。

A. Geolocation.getCurrentPosition获取精确位置的流程是什么样的?
  1. 在PC端,因为原生接口成功率很低,JS-API会优先调用精确IP定位服务,在IP定位失败的时候,尝试使用浏览器原生定位接口进行定位,如果原生定位接口也定位失败,则返回error事件或回调error信息。定位成功之后我们会对浏览器定位的经纬度结果进行向高德坐标的转化,并对所有有效定位结果融合地址信息后返回complete事件或者回调complete信息。
  2. 在移动端,如果开发者开启了sdk辅助定位,那么安卓手机上我们会优先尝试调用sdk的定位接口,失败之后优先调用浏览器原生定位接口进行定位,浏览器定位失败之后尝试进行精确IP定位,如果以上三种定位全部尝试失败则返回error事件或回调error信息,否则和PC端的一样,定位成功之后进行高德坐标转化和地址融合。
  3. 我们在定位的回调或者事件响应中返回了message字段,message字段明确指出了每一步的成功和失败原因。
B. 如果没有拿到message如何获取定位失败错误信息?

可以通过如下方法获取定位失败信息,之后根据定位错误信息参考下一节的说明

//可以拷贝如下代码,使用alert输出定位失败信息
//解析定位错误信息
function onError(data) {
alert(JSON.stringify(data));
document.getElementById('tip').innerHTML = '定位失败';
}
C. getCurrentPosition返回的message原因解析:
  1. Get ipLocation failed:IP精确定位失败,精确IP定位服务目前无法完全覆盖所有用户IP,失败率在5%左右;
  2. sdk定位失败:请检查sdk的key是否设置好,以及webview的定位权限及应用和系统的定位权限是否开启。
  3. 浏览器定位失败,有多种情况:

Browser not Support html5 geolocation:浏览器不支持原生定位接口,如IE较低版本的浏览器等
Geolocation permission denied:用户禁用了定位权限,需要用户开启设备和浏览器的定位权限,并在浏览器弹窗中点击“允许使用定位”选项。
Geolocation permission denied:浏览器禁止了非安全域的定位请求,比如Chrome、IOS10已陆续禁止,这时候需要升级站点到HTTPS。注意Chrome不会禁止localhost等域名HTTP协议下的定位
Get geolocation time out:浏览器定位超时,包括原生的超时,可以适当增加超时属性的设定值以减少这一现象,另外还有个别浏览器(如google Chrome浏览器等)本身的定位接口是黑洞,通过其请求定位完全没有回应,也会超时返回失败。
Get geolocation failed:定位失败,Chrome、火狐以及部分套壳浏览器接入的定位服务在国外,有较大限制,失败率高。

注释:如果定位到城市即可满足需求,建议大家改用Geolocation.getCityInfo方法,可以根据IP返回用户所在城市的基本信息,包括省、市名称、adcode、citycode、城市中心点,城市矩形边界等信息。



百度地图JavaScript API

简介

JavaScript API提供在Web端获取当前位置信息的方法,融合了浏览器定位、IP定位、安卓定位SDK辅助定位等多种手段,提供了获取当前准确位置、获取当前城市信息等功能。

浏览器定位精度依赖浏览器自身特性,IP定位的精度值为城市级别。

对于安卓WebView页面的开发者,可以结合定位SDK进行辅助定位,使用方法参见定位SDK相关章节。

注:由于Chrome、iOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。

提供的定位服务
接口 类名 简介
浏览器定位 Geolocation 优先调用浏览器H5定位接口,如果失败会调用IP定位
IP定位 LocalCity 根据用户IP 返回城市级别的定位结果
定位SDK辅助定位 Geolocation ......
定位方法代码示例
//浏览器定位
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        alert('您的位置:'+r.point.lng+','+r.point.lat);
    }
    else {
        alert('failed'+this.getStatus());
    }        
});
其他

转载

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XX"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXX"></script>` 

上面这段代码执行完后百度会返回一段代码并插入到你的DOM中执行

(function() {
    window.BMap_loadScriptTime = (new Date).getTime();
    document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=XX&services=&t=20160513110936"></script>');
})();
  

在函数执行的时候,经过测试不管是否允许地理位置的授权,都能获取到定位位置,只不过不授权时候获取的应该是IP地址的定位,授权是精确的GPS定位而已

所以在任何一段Javascript脚本中执行上述代码,用户在知道弹出询问是否允许获取地理位置授权这个提示之后,不管是否允许都能获取到使用者的定位的

注意是geolocation是HTML5的东西,判断一下浏览器是否支持

if ("geolocation" in navigator) {
    alert("支持geolocation");
} else {
    alert("不支持geolocation");
}

百度geolocation.getCurrentPosition()这个函数里面的第一个参数是回调成功后执行的,第二个参数是回调后失败执行的,官网的地址貌似没有写明白第二个参数是可以传一个对象或者匿名函数进去,所以导致很多人不知道getCurrentPosition失效的时候怎么捕捉到这个失败的回调,下面的例子就是传入一个失败时候要执行回调函数,让后面代码能顺利执行下去

var setCookie = function(name, value) {
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
};
var geolocation = new BMap.Geolocation();
//弹出地理授权  
geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            alert('定位成功');
            console.log(r.point);
        } else {
            alert("baidu return failed");
        }
    },
    //获取失败时候的回调  
    function(r) {
        console.log(r);
        alert('定位失败');
        return {
            //设置高精度  
            enableHighAccuracy: true
        };
    }
);

如果确实因为各种原因而获取不到回调,建议这里加个定时器比较保险

setTimeout(function() {
    alert("获取超时");
    setCookie("longitude", '113.333333');
    setCookie("latitude", '23.333333');
    setCookie("city", 'autumnswind');
    setCookie("cityCode", '543210');
    load();
}, 4000)

无法获取定位的原因:应该是鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。还有可能是因为某些浏览器调用了谷歌的服务,所以这里会被卡。







©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容