【高德地圖API】從零開始學高德JS API（七）——定位方式大揭祕

時間 2019-12-07

標籤高德地圖API 開始 api 定位方式揭祕欄目 JavaScript 简体版

原文原文鏈接

摘要：關於定位，分爲GPS定位和網絡定位2種。GPS定位，精度較高，可達到10米，但室內不可用，且超級費電。網絡定位，分爲wifi定位和基站定位，都是經過獲取wifi或者基站信息，而後查詢對應的wifi或者基站位置數據庫，獲得的定位地點。定位數據庫能夠不斷完善不斷補充，因此，越定位越準確。本文詳細描述了，若是使用高德JS API來實現位置定位、城市定位的方法，包含了IP定位，瀏覽器定位，檢索定位等多種網絡定位方法。固然，若是您的手機有GPS功能，那麼使用瀏覽器定位的時候，會自動獲取GPS信息，使得定位更加準確。javascript

1、瀏覽器定位css

瀏覽器定位插件，封裝了標準HTML5定位，而且包含糾偏模塊。html

因爲核心是HTML5定位，因此瀏覽器定位插件僅適用於支持HTML5的瀏覽器上，好比，Internet Explorer 九、Firefox、Chrome、Safari 以及 Opera 等。同時，須要瀏覽器容許該服務進行定位。以下圖：java

另外，瀏覽器定位插件也是混合定位，獲取了wifi、基站信息用以定位，對於擁有 GPS 的設備，好比 iPhone，因爲得到GPS信息，使得地理定位更加精確。web

瀏覽器定位，最好使用在手機瀏覽器上，會更加準確，也更加符合使用場景。PC瀏覽器上，建議使用IP定位。數據庫

定位代碼：api

複製代碼
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); //定位成功後的回調函數
});
複製代碼瀏覽器

效果圖：緩存

2、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屬性缺省，地圖默認顯示用戶所在城市範圍
};

3、檢索定位

當瀏覽器定位和IP定位都失敗時，能夠經過關鍵字查詢，來定位城市甚至街道。

一、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); //關鍵字查詢
});
}
複製代碼

二、地址解析

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); //地理編碼
});
}
複製代碼

4、源代碼與示例

所有源代碼：

複製代碼
<!DOCTYPE HTML>
<html>
<head>

<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()">

<button onclick="javascript:getCurrentPosition();">瀏覽器定位</button>

<button onclick="javascript:showCityInfo();">IP定位</button>

<input type="text" id="key_1" value="上海市" />
<button onclick="javascript:placeSearch();">關鍵字定位</button>

<input type="text" id="key_2" value="北京市朝陽區大屯路" />
<button onclick="javascript:geocoder();">地址定位</button>

</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 = '

定位成功

'; str += '

經度：' + data.position.getLng() + '

'; str += '

緯度：' + data.position.getLat() + '

'; str += '

精度：' + data.accuracy + ' 米

'; str += '

是否通過偏移：' + (data.isConverted ? '是' : '否') + '

'; result.innerHTML = str; }; function onError (data) { //解析定位錯誤信息 var str = '

定位失敗

'; str += '

錯誤信息：' switch(data.info) { case 'PERMISSION_DENIED': str += '瀏覽器阻止了定位操做'; break; case 'POSITION_UNAVAILBLE': str += '沒法得到當前位置'; break; case 'TIMEOUT': str += '定位超時'; break; default: str += '未知錯誤'; break; } str += '

'; 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