【高德地圖API】從零開始學(xué)高德JS API（七）——定位方式大揭秘

摘要：關(guān)于定位，分為GPS定位和網(wǎng)絡(luò)定位2種。GPS定位，精度較高，可達(dá)到10米，但室內(nèi)不可用，且超級費(fèi)電。網(wǎng)絡(luò)定位，分為wifi定位和基站定位，都是通過獲取wifi或者基站信息，然后查詢對應(yīng)的wifi或者基站位置數(shù)據(jù)庫，得到的定位地點(diǎn)。定位數(shù)據(jù)庫可以不斷完善不斷補(bǔ)充，所以，越定位越準(zhǔn)確。本文詳細(xì)描述了，如果使用高德JS API來實(shí)現(xiàn)位置定位、城市定位的方法，包含了IP定位，瀏覽器定位，檢索定位等多種網(wǎng)絡(luò)定位方法。當(dāng)然，如果您的手機(jī)有GPS功能，那么使用瀏覽器定位的時(shí)候，會自動獲取GPS信息，使得定位更加準(zhǔn)確。

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

一、瀏覽器定位

瀏覽器定位插件，封裝了標(biāo)準(zhǔn)HTML5定位，并且包含糾偏模塊。

由于核心是HTML5定位，所以瀏覽器定位插件僅適用于支持HTML5的瀏覽器上，比如，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 等。同時(shí)，需要瀏覽器允許該服務(wù)進(jìn)行定位。如下圖：

另外，瀏覽器定位插件也是混合定位，獲取了wifi、基站信息用以定位，對于擁有 GPS 的設(shè)備，比如 iPhone，由于獲得GPS信息，使得地理定位更加精確。

瀏覽器定位，最好使用在手機(jī)瀏覽器上，會更加準(zhǔn)確，也更加符合使用場景。PC瀏覽器上，建議使用IP定位。

定位代碼：

var geolocation; 
mapObj.plugin(["AMap.Geolocation"],function(){    //添加瀏覽器定位服務(wù)插件
　　var geoOptions={ 
　　enableHighAccuracy:true,  //是否使用高精度
　　timeout:3000,    //若在指定時(shí)間內(nèi)未定位成功，返回超時(shí)錯(cuò)誤信息。默認(rèn)無窮大。
　　maximumAge:1000  //緩存毫秒數(shù)。定位成功后，定位結(jié)果的保留時(shí)間。默認(rèn)0。
　　}; 
　　geolocation=new AMap.Geolocation(geoOptions); 
　　　　AMap.event.addListener(geolocation , ‘complete’,geolocationResult); //定位成功后的回調(diào)函數(shù)
});

效果圖：

二、IP定位

通過網(wǎng)絡(luò)獲取IP信息，然后查詢IP數(shù)據(jù)庫，獲取相應(yīng)的地址信息。非常適用于城市切換的場景，比如團(tuán)購、酒店、天氣等。

IP數(shù)據(jù)庫也是可以完善補(bǔ)充，越來越豐富的，所以也是越使用越準(zhǔn)確的。

但如果IP有跳轉(zhuǎn)，有篡改等，那么IP定位就會不準(zhǔn)確了。

//加載IP定位插件
    mapObj.plugin(["AMap.CitySearch"], function() {
        //實(shí)例化城市查詢類
        var citysearch = new AMap.CitySearch();
        //自動獲取用戶IP，返回當(dāng)前城市
        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 = "您當(dāng)前所在城市："+cityinfo+"";
                //地圖顯示當(dāng)前城市
                mapObj.setBounds(citybounds);
            }
            else {
                document.getElementById('result').innerHTML = "您當(dāng)前所在城市："+result.info+"";
            }
        });
        AMap.event.addListener(citysearch, "error", function(result){alert(result.info);});
    });

效果圖：

還有一種“偷懶兒”的方法，是高德瀏覽器定位的后門，就是使用默認(rèn)定位。即，在地圖初始化時(shí)，不填入中心點(diǎn)center和地圖級別level，那么高德會自動幫你定位。

但是這也有危險(xiǎn)，就是如果定位失敗了，也沒啥提示。

自動定位代碼：

function mapInit () {
    mapObj = new AMap.Map('iCenter');    //默認(rèn)定位：初始化加載地圖時(shí)，center及l(fā)evel屬性缺省，地圖默認(rèn)顯示用戶所在城市范圍
};

三、檢索定位

當(dāng)瀏覽器定位和IP定位都失敗時(shí)，可以通過關(guān)鍵字查詢，來定位城市甚至街道。

1、POI檢索，關(guān)鍵詞檢索

通過一些簡短的關(guān)鍵詞，檢索一個(gè)地點(diǎn)，使用AMap.PlaceSearch地點(diǎn)搜索服務(wù)插件。檢索到地點(diǎn)后，默認(rèn)顯示第一個(gè)點(diǎn)的位置即可。

參數(shù)對象PlaceSearchOptions允許設(shè)置搜索城市、搜索數(shù)據(jù)類別、搜索結(jié)果詳略、搜索結(jié)果排序規(guī)則等。

代碼：

var MSearch;
var key_1;
function placeSearch() {  //POI搜索，關(guān)鍵字查詢
    key_1 = document.getElementById("key_1").value;
    document.getElementById('result').innerHTML = "您輸入的是：" + key_1;
    mapObj.plugin(["AMap.PlaceSearch"], function() {    //構(gòu)造地點(diǎn)查詢類  
        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));
        });//返回地點(diǎn)查詢結(jié)果        
        MSearch.search(key_1); //關(guān)鍵字查詢
    });
}

2、地址解析

AMap.Geocoder地理編碼服務(wù)插件，是指將地址信息和地理坐標(biāo)點(diǎn)信息進(jìn)行相互轉(zhuǎn)化，包括將地址信息轉(zhuǎn)換為地理坐標(biāo)點(diǎn)的編碼，將地理坐標(biāo)點(diǎn)轉(zhuǎn)換為地址信息的逆地理編碼。

我們使用地址解析。地址解析，是通過將結(jié)構(gòu)化地址信息，解析成經(jīng)緯度，然后設(shè)置地圖中心點(diǎn)。

代碼：

var MGeocoder;
var key_2;
function geocoder() {  //地理編碼返回結(jié)果展示
    key_2 = document.getElementById("key_2").value;  
    document.getElementById('result').innerHTML = "您輸入的是：" + key_2;    
    mapObj.plugin(["AMap.Geocoder"], function() {     //加載地理編碼插件
        MGeocoder = new AMap.Geocoder({
            city:"010", //城市，默認(rèn)：“全國”
            radius:1000 //范圍，默認(rèn)：500
        });
        //返回地理編碼結(jié)果
        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();">關(guān)鍵字定位</button>
            </li>
            <li>
                <input type="text" id="key_2" value="北京市朝陽區(qū)大屯路" />
                <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');    //默認(rèn)定位：初始化加載地圖時(shí)，center及l(fā)evel屬性缺省，地圖默認(rèn)顯示用戶所在城市范圍
};
function getCurrentPosition () { //調(diào)用瀏覽器定位服務(wù)
    mapObj.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默認(rèn):true
            timeout: 10000,          //超過10秒后停止定位，默認(rèn)：無窮大
            maximumAge: 0,           //定位結(jié)果緩存0毫秒，默認(rèn)：0
            convert: true,           //自動偏移坐標(biāo)，偏移后的坐標(biāo)為高德坐標(biāo)，默認(rèn)：true
            showButton: true,        //顯示定位按鈕，默認(rèn)：true
            buttonPosition: 'LB',    //定位按鈕停靠位置，默認(rèn)：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設(shè)置的停靠位置的偏移量，默認(rèn)：Pixel(10, 20)
            showMarker: true,        //定位成功后在定位到的位置顯示點(diǎn)標(biāo)記，默認(rèn)：true
            showCircle: true,        //定位成功后用圓圈表示定位精度范圍，默認(rèn)：true
            panToLocation: true,     //定位成功后將定位到的位置作為地圖中心點(diǎn)，默認(rèn)：true
            zoomToAccuracy:true      //定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見，默認(rèn)：false
        });
        mapObj.addControl(geolocation);
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出錯(cuò)信息
    });
};
function onComplete (data) {   //解析定位結(jié)果
    var str = '<p>定位成功</p>';
    str += '<p>經(jīng)度：' + data.position.getLng() + '</p>';
    str += '<p>緯度：' + data.position.getLat() + '</p>';
    str += '<p>精度：' + data.accuracy + ' 米</p>';
    str += '<p>是否經(jīng)過偏移：' + (data.isConverted ? '是' : '否') + '</p>';
    result.innerHTML = str;
};
function onError (data) {    //解析定位錯(cuò)誤信息
    var str = '<p>定位失敗</p>';
    str += '<p>錯(cuò)誤信息：'
    switch(data.info) {
        case 'PERMISSION_DENIED':
            str += '瀏覽器阻止了定位操作';
            break;
        case 'POSITION_UNAVAILBLE':
            str += '無法獲得當(dāng)前位置';
            break;
        case 'TIMEOUT':
            str += '定位超時(shí)';
            break;
        default:
            str += '未知錯(cuò)誤';
            break;
    }
    str += '</p>';
    result.innerHTML = str;
};
function showCityInfo() {  //IP定位
    //加載IP定位插件
    mapObj.plugin(["AMap.CitySearch"], function() {
        //實(shí)例化城市查詢類
        var citysearch = new AMap.CitySearch();
        //自動獲取用戶IP，返回當(dāng)前城市
        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 = "您當(dāng)前所在城市："+cityinfo+"";
                //地圖顯示當(dāng)前城市
                mapObj.setBounds(citybounds);
            }
            else {
                document.getElementById('result').innerHTML = "您當(dāng)前所在城市："+result.info+"";
            }
        });
        AMap.event.addListener(citysearch, "error", function(result){alert(result.info);});
    });
}
var MSearch;
var key_1;
function placeSearch() {  //POI搜索，關(guān)鍵字查詢
    key_1 = document.getElementById("key_1").value;
    document.getElementById('result').innerHTML = "您輸入的是：" + key_1;
    mapObj.plugin(["AMap.PlaceSearch"], function() {    //構(gòu)造地點(diǎn)查詢類  
        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));
        });//返回地點(diǎn)查詢結(jié)果        
        MSearch.search(key_1); //關(guān)鍵字查詢
    });
}
var MGeocoder;
var key_2;
function geocoder() {  //地理編碼返回結(jié)果展示
    key_2 = document.getElementById("key_2").value;  
    document.getElementById('result').innerHTML = "您輸入的是：" + key_2;    
    mapObj.plugin(["AMap.Geocoder"], function() {     //加載地理編碼插件
        MGeocoder = new AMap.Geocoder({
            city:"010", //城市，默認(rèn)：“全國”
            radius:1000 //范圍，默認(rèn)：500
        });
        //返回地理編碼結(jié)果
        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