原文:【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种。GPS定位,精度较高,可达到10米,但室内不可用,且超级费电。网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点。定位数据库可以不断完善不断补充,所以,越定位越准确。本文详细描述了,如果使用高德JS API来实现位置定位、城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法。当然,如果您的手机有GPS功能,那么使用浏览器定位的时候,会自动获取GPS信息,使得定位更加准确。

--------------------------------------------------------------------------------

一、浏览器定位

浏览器定位插件,封装了标准HTML5定位,并且包含纠偏模块。

由于核心是HTML5定位,所以浏览器定位插件仅适用于支持HTML5的浏览器上,比如,Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 等。同时,需要浏览器允许该服务进行定位。如下图:

另外,浏览器定位插件也是混合定位,获取了wifi、基站信息用以定位,对于拥有 GPS 的设备,比如 iPhone,由于获得GPS信息,使得地理定位更加精确。

浏览器定位,最好使用在手机浏览器上,会更加准确,也更加符合使用场景。PC浏览器上,建议使用IP定位。

定位代码:

var geolocation;
mapObj.plugin(["AMap.Geolocation"],function(){ //添加浏览器定位服务插件
  var geoOptions={
  enableHighAccuracy:true, //是否使用高精度
  timeout:3000, //若在指定时间内未定位成功,返回超时错误信息。默认无穷大。
  maximumAge:1000 //缓存毫秒数。定位成功后,定位结果的保留时间。默认0。
  };
  geolocation=new AMap.Geolocation(geoOptions);
    AMap.event.addListener(geolocation , ‘complete’,geolocationResult); //定位成功后的回调函数
});

效果图:

二、IP定位

通过网络获取IP信息,然后查询IP数据库,获取相应的地址信息。非常适用于城市切换的场景,比如团购、酒店、天气等。

IP数据库也是可以完善补充,越来越丰富的,所以也是越使用越准确的。

但如果IP有跳转,有篡改等,那么IP定位就会不准确了。

 //加载IP定位插件
mapObj.plugin(["AMap.CitySearch"], function() {
//实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP,返回当前城市
citysearch.getLocalCity();
AMap.event.addListener(citysearch, "complete", function(result){
if(result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
document.getElementById('result').innerHTML = "您当前所在城市:"+cityinfo+"";
//地图显示当前城市
mapObj.setBounds(citybounds);
}
else {
document.getElementById('result').innerHTML = "您当前所在城市:"+result.info+"";
}
});
AMap.event.addListener(citysearch, "error", function(result){alert(result.info);});
});

效果图:

还有一种“偷懒儿”的方法,是高德浏览器定位的后门,就是使用默认定位。即,在地图初始化时,不填入中心点center和地图级别level,那么高德会自动帮你定位。

但是这也有危险,就是如果定位失败了,也没啥提示。

自动定位代码:

function mapInit () {
mapObj = new AMap.Map('iCenter'); //默认定位:初始化加载地图时,center及level属性缺省,地图默认显示用户所在城市范围
};

三、检索定位

当浏览器定位和IP定位都失败时,可以通过关键字查询,来定位城市甚至街道。

1、POI检索,关键词检索

通过一些简短的关键词,检索一个地点,使用AMap.PlaceSearch地点搜索服务插件。检索到地点后,默认显示第一个点的位置即可。

参数对象PlaceSearchOptions允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。

代码:

var MSearch;
var key_1;
function placeSearch() { //POI搜索,关键字查询
key_1 = document.getElementById("key_1").value;
document.getElementById('result').innerHTML = "您输入的是:" + key_1;
mapObj.plugin(["AMap.PlaceSearch"], function() { //构造地点查询类
MSearch = new AMap.PlaceSearch({
pageSize:10,
pageIndex:1,
city:"021" //城市
});
AMap.event.addListener(MSearch, "complete", function(data){
var poiArr = data.poiList.pois;
var lngX = poiArr[0].location.getLng();
var latY = poiArr[0].location.getLat();
mapObj.setCenter(new AMap.LngLat(lngX, latY));
});//返回地点查询结果
MSearch.search(key_1); //关键字查询
});
}

2、地址解析

AMap.Geocoder地理编码服务插件,是指将地址信息和地理坐标点信息进行相互转化,包括将地址信息转换为地理坐标点的编码,将地理坐标点转换为地址信息的逆地理编码。

我们使用地址解析。地址解析,是通过将结构化地址信息,解析成经纬度,然后设置地图中心点。

代码:

var MGeocoder;
var key_2;
function geocoder() { //地理编码返回结果展示
key_2 = document.getElementById("key_2").value;
document.getElementById('result').innerHTML = "您输入的是:" + key_2;
mapObj.plugin(["AMap.Geocoder"], function() { //加载地理编码插件
MGeocoder = new AMap.Geocoder({
city:"010", //城市,默认:“全国”
radius:1000 //范围,默认:500
});
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", function(data){
var geocode = data.geocodes;
var lngX = geocode[0].location.getLng();
var latY = geocode[0].location.getLat();
mapObj.setCenter(new AMap.LngLat(lngX, latY));
});
MGeocoder.getLocation(key_2); //地理编码
});
}

四、源代码与示例

全部源代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定位</title>
<link rel="stylesheet" type="text/css" href="zero.css" />
<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=【您的key】"></script>
</head>
<body onLoad="mapInit()">
<div id="iCenter"></div>
<div id="iControlbox">
<ul>
<li>
<button onclick="javascript:getCurrentPosition();">浏览器定位</button>
</li>
<li>
<button onclick="javascript:showCityInfo();">IP定位</button>
</li>
<li>
<input type="text" id="key_1" value="上海市" />
<button onclick="javascript:placeSearch();">关键字定位</button>
</li>
<li>
<input type="text" id="key_2" value="北京市朝阳区大屯路" />
<button onclick="javascript:geocoder();">地址定位</button>
</li>
</ul>
</div>
<div id="result"></div>
</body>
<script language="javascript">
var mapObj, geolocation;
var result;
function mapInit () {
mapObj = new AMap.Map('iCenter'); //默认定位:初始化加载地图时,center及level属性缺省,地图默认显示用户所在城市范围
};
function getCurrentPosition () { //调用浏览器定位服务
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);
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
});
};
function onComplete (data) { //解析定位结果
var str = '<p>定位成功</p>';
str += '<p>经度:' + data.position.getLng() + '</p>';
str += '<p>纬度:' + data.position.getLat() + '</p>';
str += '<p>精度:' + data.accuracy + ' 米</p>';
str += '<p>是否经过偏移:' + (data.isConverted ? '是' : '否') + '</p>';
result.innerHTML = str;
};
function onError (data) { //解析定位错误信息
var str = '<p>定位失败</p>';
str += '<p>错误信息:'
switch(data.info) {
case 'PERMISSION_DENIED':
str += '浏览器阻止了定位操作';
break;
case 'POSITION_UNAVAILBLE':
str += '无法获得当前位置';
break;
case 'TIMEOUT':
str += '定位超时';
break;
default:
str += '未知错误';
break;
}
str += '</p>';
result.innerHTML = str;
};
function showCityInfo() { //IP定位
//加载IP定位插件
mapObj.plugin(["AMap.CitySearch"], function() {
//实例化城市查询类
var citysearch = new AMap.CitySearch();
//自动获取用户IP,返回当前城市
citysearch.getLocalCity();
AMap.event.addListener(citysearch, "complete", function(result){
if(result && result.city && result.bounds) {
var cityinfo = result.city;
var citybounds = result.bounds;
document.getElementById('result').innerHTML = "您当前所在城市:"+cityinfo+"";
//地图显示当前城市
mapObj.setBounds(citybounds);
}
else {
document.getElementById('result').innerHTML = "您当前所在城市:"+result.info+"";
}
});
AMap.event.addListener(citysearch, "error", function(result){alert(result.info);});
});
}
var MSearch;
var key_1;
function placeSearch() { //POI搜索,关键字查询
key_1 = document.getElementById("key_1").value;
document.getElementById('result').innerHTML = "您输入的是:" + key_1;
mapObj.plugin(["AMap.PlaceSearch"], function() { //构造地点查询类
MSearch = new AMap.PlaceSearch({
pageSize:10,
pageIndex:1,
city:"021" //城市
});
AMap.event.addListener(MSearch, "complete", function(data){
var poiArr = data.poiList.pois;
var lngX = poiArr[0].location.getLng();
var latY = poiArr[0].location.getLat();
mapObj.setCenter(new AMap.LngLat(lngX, latY));
});//返回地点查询结果
MSearch.search(key_1); //关键字查询
});
}
var MGeocoder;
var key_2;
function geocoder() { //地理编码返回结果展示
key_2 = document.getElementById("key_2").value;
document.getElementById('result').innerHTML = "您输入的是:" + key_2;
mapObj.plugin(["AMap.Geocoder"], function() { //加载地理编码插件
MGeocoder = new AMap.Geocoder({
city:"010", //城市,默认:“全国”
radius:1000 //范围,默认:500
});
//返回地理编码结果
AMap.event.addListener(MGeocoder, "complete", function(data){
var geocode = data.geocodes;
var lngX = geocode[0].location.getLng();
var latY = geocode[0].location.getLat();
mapObj.setCenter(new AMap.LngLat(lngX, latY));
});
MGeocoder.getLocation(key_2); //地理编码
});
}
</script>
</html>

效果图:

demo地址:http://zhaoziang.com/amap/zero_7_1.html

【高德地图API】从零开始学高德JS API(七)——定位方式大揭秘的更多相关文章

  1. 【高德地图API】从零开始学高德JS API(八)——地址解析与逆地址解析

    原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...

  2. 【高德地图API】从零开始学高德JS API(六)——坐标转换

    原文:[高德地图API]从零开始学高德JS API(六)——坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? --- ...

  3. 【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行

    原文:[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3 ...

  4. 【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  5. 【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  6. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  7. 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图

    原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...

  8. 从零开始学Electron笔记(七)

    在之前的文章我们介绍了一下Electron中的对话框 Dialog和消息通知 Notification,接下来我们继续说一下Electron中的系统快捷键及应用打包. 全局快捷键模块就是 global ...

  9. 从零开始学习Node.js例子七 发送HTTP客户端请求并显示响应结果

    wget.js:发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求.data事件在数据到达时被触发,error事件在发生错误时被触发.HTTP请求中的数据格式通过MIM ...

随机推荐

  1. decimal ? 含义

    例如:   decimal ? je = zfje;   意思是  将 JE赋值为  ZFJE ,  并且允许  JE 为 NULL 值 这时JE为引用类型

  2. JMS and ActiveMQ first lesson(转)

    JMS and ActiveMQ first lesson -- jms基础概念和应用场景 2011-6-18 PM 9:30 主讲:kimmking <kimmking@163.com> ...

  3. C++使用对象指针

    //定义结构 Box.h: #ifndef BOX_H #define BOX_H struct Box{ double length; double width; double height; do ...

  4. hdu 2454 Degree Sequence of Graph G (推断简单图)

    ///已知各点的度,推断是否为一个简单图 #include<stdio.h> #include<algorithm> #include<string.h> usin ...

  5. .net RPC框架选型(一)

    近期开始研究分布式架构,会涉及到一个最核心的组件:RPC(Remote Procedure Call Protocol).这个东西的稳定性与性能,直接决定了分布式架构系统的好坏.RPC技术,我们的产品 ...

  6. 【Android基础】点击Back键退出应用程序

    //第一种方法(弹出对话框) @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-genera ...

  7. 性能优化——统计信息——SQLServer自动更新和自动创建统计信息选项

    原文:性能优化--统计信息--SQLServer自动更新和自动创建统计信息选项 原文译自:http://www.mssqltips.com/sqlservertip/2766/sql-server-a ...

  8. PowerMockito使用详解(转)

    一.为什么要使用Mock工具 在做单元测试的时候,我们会发现我们要测试的方法会引用很多外部依赖的对象,比如:(发送邮件,网络通讯,远程服务, 文件系统等等). 而我们没法控制这些外部依赖的对象,为了解 ...

  9. Unity2D实现贴图凹凸感并接受实时光照效果

    先看终于效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  10. Linux进程管理(-)

    一.进程的类型 能够将执行在Linux系统中的进程分为三种不同的类型: 交互进程:由一个Shell启动的进程.交互进程既能够在前台执行,也能够在后台   执行. 批处理进程:不与特定的终端相关联,提交 ...