溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
摘要：關于定位，分為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
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
