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

酸奶小妹發表於2014-07-09
地圖APIJS

摘要：關於定位，分為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

 

相關文章