【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘
导读：本文共6663字符，通常情况下阅读需要22分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 摘要：关于定位，分为GPS定位和网络定位2种。GPS定位，精度较高，可达到10米，但室内不可用，且超级费电。网络定位，分为wifi定位和基站定位，都是通过获取wifi或者基站信息，然后查询对应的wifi或者基站位置数据库，得到的定位地点。定位数据库可以不断完善不断补充，所以，越定位越准确。本文详细描述了，如果使用高德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定位。
定位代码：
vargeolocation;mapObj.plugin(["AMap.Geolocation"],function(){//添加浏览器定位服务插件 vargeoOptions={ enableHighAccuracy:true,//是否使用高精度 timeout:3000,//若在指定时间内未定位成功，返回超时错误信息。默认无穷大。 maximumAge:1000//缓存毫秒数。定位成功后，定位结果的保留时间。默认0。 }; geolocation=newAMap.Geolocation(geoOptions); AMap.event.addListener(geolocation,‘complete’,geolocationResult);//定位成功后的回调函数});效果图：
二、IP定位
通过网络获取IP信息，然后查询IP数据库，获取相应的地址信息。非常适用于城市切换的场景，比如团购、酒店、天气等。
IP数据库也是可以完善补充，越来越丰富的，所以也是越使用越准确的。
但如果IP有跳转，有篡改等，那么IP定位就会不准确了。
//加载IP定位插件mapObj.plugin(["AMap.CitySearch"],function(){//实例化城市查询类varcitysearch=newAMap.CitySearch();//自动获取用户IP，返回当前城市citysearch.getLocalCity();AMap.event.addListener(citysearch,"complete",function(result){if(result&&result.city&&result.bounds){varcityinfo=result.city;varcitybounds=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，那么高德会自动帮你定位。
但是这也有危险，就是如果定位失败了，也没啥提示。
自动定位代码：
functionmapInit(){mapObj=newAMap.Map('iCenter');//默认定位：初始化加载地图时，center及level属性缺省，地图默认显示用户所在城市范围};三、检索定位
当浏览器定位和IP定位都失败时，可以通过关键字查询，来定位城市甚至街道。
1、POI检索，关键词检索
通过一些简短的关键词，检索一个地点，使用AMap.PlaceSearch地点搜索服务插件。检索到地点后，默认显示第一个点的位置即可。
参数对象PlaceSearchOptions允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。
代码：
varMSearch;varkey_1;functionplaceSearch(){//POI搜索，关键字查询key_1=document.getElementById("key_1").value;document.getElementById('result').innerHTML="您输入的是："+key_1;mapObj.plugin(["AMap.PlaceSearch"],function(){//构造地点查询类MSearch=newAMap.PlaceSearch({pageSize:10,pageIndex:1,city:"021"//城市});AMap.event.addListener(MSearch,"complete",function(data){varpoiArr=data.poiList.pois;varlngX=poiArr[0].location.getLng();varlatY=poiArr[0].location.getLat();mapObj.setCenter(newAMap.LngLat(lngX,latY));});//返回地点查询结果MSearch.search(key_1);//关键字查询});}2、地址解析
AMap.Geocoder地理编码服务插件，是指将地址信息和地理坐标点信息进行相互转化，包括将地址信息转换为地理坐标点的编码，将地理坐标点转换为地址信息的逆地理编码。
我们使用地址解析。地址解析，是通过将结构化地址信息，解析成经纬度，然后设置地图中心点。
代码：
varMGeocoder;varkey_2;functiongeocoder(){//地理编码返回结果展示key_2=document.getElementById("key_2").value;document.getElementById('result').innerHTML="您输入的是："+key_2;mapObj.plugin(["AMap.Geocoder"],function(){//加载地理编码插件MGeocoder=newAMap.Geocoder({city:"010",//城市，默认：“全国”radius:1000//范围，默认：500});//返回地理编码结果AMap.event.addListener(MGeocoder,"complete",function(data){vargeocode=data.geocodes;varlngX=geocode[0].location.getLng();varlatY=geocode[0].location.getLat();mapObj.setCenter(newAMap.LngLat(lngX,latY));});MGeocoder.getLocation(key_2);//地理编码});}四、源代码与示例
全部源代码：
<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>定位</title><linkrel="stylesheet"type="text/css"href="zero.css"/><scriptlanguage="javascript"src="http://webapi.amap.com/maps?v=1.3&key=【您的key】"></script></head><bodyonLoad="mapInit()"><divid="iCenter"></div><divid="iControlbox"><ul><li><buttononclick="javascript:getCurrentPosition();">浏览器定位</button></li><li><buttononclick="javascript:showCityInfo();">IP定位</button></li><li><inputtype="text"id="key_1"value="上海市"/><buttononclick="javascript:placeSearch();">关键字定位</button></li><li><inputtype="text"id="key_2"value="北京市朝阳区大屯路"/><buttononclick="javascript:geocoder();">地址定位</button></li></ul></div><divid="result"></div></body><scriptlanguage="javascript">varmapObj,geolocation;varresult;functionmapInit(){mapObj=newAMap.Map('iCenter');//默认定位：初始化加载地图时，center及level属性缺省，地图默认显示用户所在城市范围};functiongetCurrentPosition(){//调用浏览器定位服务mapObj.plugin('AMap.Geolocation',function(){geolocation=newAMap.Geolocation({enableHighAccuracy:true,//是否使用高精度定位，默认:truetimeout:10000,//超过10秒后停止定位，默认：无穷大maximumAge:0,//定位结果缓存0毫秒，默认：0convert:true,//自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton:true,//显示定位按钮，默认：truebuttonPosition:'LB',//定位按钮停靠位置，默认：'LB'，左下角buttonOffset:newAMap.Pixel(10,20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10,20)showMarker:true,//定位成功后在定位到的位置显示点标记，默认：trueshowCircle:true,//定位成功后用圆圈表示定位精度范围，默认：truepanToLocation:true,//定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});mapObj.addControl(geolocation);AMap.event.addListener(geolocation,'complete',onComplete);//返回定位信息AMap.event.addListener(geolocation,'error',onError);//返回定位出错信息});};functiononComplete(data){//解析定位结果varstr='<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;};functiononError(data){//解析定位错误信息varstr='<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;};functionshowCityInfo(){//IP定位//加载IP定位插件mapObj.plugin(["AMap.CitySearch"],function(){//实例化城市查询类varcitysearch=newAMap.CitySearch();//自动获取用户IP，返回当前城市citysearch.getLocalCity();AMap.event.addListener(citysearch,"complete",function(result){if(result&&result.city&&result.bounds){varcityinfo=result.city;varcitybounds=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);});});}varMSearch;varkey_1;functionplaceSearch(){//POI搜索，关键字查询key_1=document.getElementById("key_1").value;document.getElementById('result').innerHTML="您输入的是："+key_1;mapObj.plugin(["AMap.PlaceSearch"],function(){//构造地点查询类MSearch=newAMap.PlaceSearch({pageSize:10,pageIndex:1,city:"021"//城市});AMap.event.addListener(MSearch,"complete",function(data){varpoiArr=data.poiList.pois;varlngX=poiArr[0].location.getLng();varlatY=poiArr[0].location.getLat();mapObj.setCenter(newAMap.LngLat(lngX,latY));});//返回地点查询结果MSearch.search(key_1);//关键字查询});}varMGeocoder;varkey_2;functiongeocoder(){//地理编码返回结果展示key_2=document.getElementById("key_2").value;document.getElementById('result').innerHTML="您输入的是："+key_2;mapObj.plugin(["AMap.Geocoder"],function(){//加载地理编码插件MGeocoder=newAMap.Geocoder({city:"010",//城市，默认：“全国”radius:1000//范围，默认：500});//返回地理编码结果AMap.event.addListener(MGeocoder,"complete",function(data){vargeocode=data.geocodes;varlngX=geocode[0].location.getLng();varlatY=geocode[0].location.getLat();mapObj.setCenter(newAMap.LngLat(lngX,latY));});MGeocoder.getLocation(key_2);//地理编码});}</script></html>效果图：
demo地址：http://zhaoziang.com/amap/zero_7_1.html
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘的详细内容，希望对您有所帮助，信息来源于网络。