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

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

阿新 • • 發佈：2019-01-15

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

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


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

     
 
                摘要：關於定位，分為GPS定位和網路定位2種。GPS定位，精度較高，可達到10米，但室內不可用，且超級費電。網路定位，分為wifi定位和基站定位，都是通過獲取wifi或者基站資訊，然後查詢對應的wifi或者基站位置資料庫，得到的定位地點。定位資料庫可以不斷完善不斷補充，所以， 



  
 

    


    
    
從零開始學 Web 之 JS 高階（三）apply與call，bind，閉包和沙箱

     
 

一、apply 和 call 方法
apply 和 call 都可以改變呼叫其的函式或方法中的 this 指向。
不同的是傳入引數時，apply 有兩個引數，第二個引數是陣列；call 從第二個引數開始是呼叫其的函式的所有引數。

使用方法：
1、apply的使用語法：
函式名.apply(物件，[引數1 



  
 

    


    
    
從零開始學 Web 之 JS 高階（二）原型鏈，原型的繼承

     
 

一、原型鏈
原型連結串列示的是例項物件與原型物件之間的一種關係，這種關係是通過__proto__原型來聯絡的。
1、原型的指向改變
例項物件的原型 __proto__ 指向的是該物件的建構函式中的原型物件 prototype，如果該物件的建構函式的 prototype 指向改變了，那麼例項物件中的原型 _ 



  
 

    


    
    
從零開始學 Web 之 移動Web（七）Bootstrap

     
 

一、常見的響應式框架
隨著Web應用變的越來越複雜，在大量的開發過程中我們發現有許多功能模組非常相似，比如輪播圖、分頁、選項卡、導航欄等，開發中往往會把這些具有通用性的功能模組進行一系列封裝，使之成為一個個元件應用到專案中，可以極大的節約開發成本，將這些通用的元件縮合到一起就形成了前端框架。
常見的響應式 



  
 

    


    
    
轉載：高德地圖API學習 從零開始學高德JS API（一）地圖展現

     
 摘要：關於地圖的顯示，我想大家最關心的就是麻點圖，自定義底圖的解決方案了吧。在過去，marker大於500之後，瀏覽器開始逐漸卡死，大家都開始尋找解決方案，比如聚合marker啊，比如麻點圖啊。聚合marker裡面還有一些複雜的演算法，而麻點圖，最讓大家頭疼的，就是如何生成麻點圖，如何切圖，如何把圖片貼到地圖 



  
 

    


    
    
【轉】從零開始學習音視訊程式設計技術（二） 音訊格式講解

     
 
                
轉自：http://blog.yundiantech.com/?log=blog&id=5



1. 音訊簡介


    前面我們說過視訊有一個每秒鐘採集多少張的概念，這就叫做視訊的幀率。

    和視訊的幀率一樣的道理，聲音也有一個頻率，叫做取樣率。

   



  
 

    


    
    
【轉】從零開始學習音視訊程式設計技術（一） 視訊格式講解

     
 
                

轉自：http://blog.yundiantech.com/?log=blog&id=4

 所謂視訊，其實就是將一張一張的圖片連續的放出來，就像放幻燈片一樣，由於人眼的惰性，因此只要圖片的數量足夠多，就會覺得是連續的動作。 所以，只需要將一張一張的圖片儲存下來 



  
 

    


    
    
《從零開始學Swift》學習筆記（Day67）——Cocoa Touch設計模式及應用之MVC模式

     
 table   control   sdn   rate   term   targe   rac   uitabbar   bsp   
原創文章，歡迎轉載。轉載請註明：關東升的博客  MVC（Model-View-Controller，模型-視圖-控制器）模式是相當古老的設計模式之中的一個，它最早出如今 



  
 

    


    
    
《從零開始學Swift》學習筆記（Day60）——Core Foundation框架

     
 類型轉換   字符   sso   grid   blog   spa   www   water   轉載   
創文章，歡迎轉載。轉載請註明：關東升的博客  Core Foundation框架是蘋果公司提供一套概念來源於Foundation框架，編程接口面向C語言風格的API。盡管在Swift中調用這樣 



  
 

    


    
    
從零開始學Kotlin-使用接口（7）

     
 如何   mark   android   interface   inter   rand   兩個   blog   dtw   從零開始學Kotlin基礎篇系列文章
定義接口

使用關鍵字interface定義接口
interface InterfaceDemo7 {
}
類或對象可以實現一個或者多個接 



  
 

    


    
    
從零開始學 Web 之 移動Web（五）touch事件的缺陷，移動端常用插件

     
 bar   知識   怎麽   element   clas   mas   index   ont   彈性   
大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

github：https://github.com/Daotin/Web
微信公眾號：Web前端之巔
博 



  
 

    


    
    
從零開始學 Web 之 移動Web（九）微金所案例

     
 空格   avi   系列教程   知識   open   流量   dao   當前   ger   
大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

github：https://github.com/Daotin/Web
微信公眾號：Web前端之巔
博客園：htt 



  
 

    


    
    
從零開始學習比特幣開發（七）-P2P網路建立流程之生成地址對並連線到指定地址

     
  
  
  
 本節繼續講解比特幣P2P網路建立流程，這節講解的執行緒為’ThreadOpenAddedConnections’，它的作用是生成地址對並連線到指定地址。 本文可以結合比特幣系統啟動的的第12步的講解來看，可以更加系統的瞭解比特幣系統啟動的過程。 
 P2P 網路的建立是在比特幣系統啟動的第  



  
 

    


    
    
從零開始學習音視訊程式設計技術（七） FFMPEG Qt視訊播放器之SDL的使用

     
 
                


前面介紹了使用FFMPEG+Qt解碼視訊並顯示。

現在我們就著手給它加上聲音播放。


播放聲音有很多種方式：

以windows系統為例，可以使用如下方法播放音訊：

1.直接呼叫系統API的wavein、waveout等函式

2.使用directsound播放
 



  
 

    


    
    
從零開始學 Web 之 移動Web（二）JD移動端網頁，移動觸屏事件

     
 
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

github：https://github.com/Daotin/Web

部落格園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/

 



  
 

    


    
    
從零開始學 Web 之 移動Web（八）Less

     
 
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......

github：https://github.com/Daotin/Web

部落格園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/

 



  
 

    


    
    
從零開始學 Web 之 移動Web（四）實現JD分類頁面

     
 

實現JD分類頁面
我們先看看要實現的效果圖：

1、專案需求：

全屏頁面
右側的頁面隨著頁面寬度的變化而變化，左側欄寬度固定不變。
左側欄可以上下滑動，如果滑動超出上下範圍自動反彈回去
點選左側欄每個專案，自動滾動左側欄使得專案置頂
當點選專案可能使得超出滑動範圍的時候，以滑動範圍為準，當前點選的專案不 



  
 

    


    
    
從零開始學 Web 之 移動Web（五）touch事件的缺陷，移動端常用外掛

     
 

一、touch事件的缺陷
我們在上面《頁面分類》的專案中，對 tap 事件的處理使用的是 touch 事件處理的，因為如果使用 click 事件的話，總會有延時。
但是呢，touch 事件並不是完美的，不管是我們自己封裝的 tap 事件，還是 zepto 自帶的 tap 事件，在移動端都有一個致命的缺陷， 



  
 

    


    
    
從零開始學 Web 之 JavaScript 高階（一）原型，貪吃蛇案例

     
 

一、複習
例項物件和建構函式之間的關係：
1、例項物件是通過建構函式來建立的，建立的過程叫例項化。
2、如何判斷一個物件是不是某種資料型別？

通過構造器的方法。例項物件.constructor === 建構函式名字
（推薦使用）例項物件 instanceof 建構函式名字

二、原型
1、原型的引入
由 



  
 

    


    
    
從零開始學 Web 之 移動Web（三）Zepto

     
 

一、Zepto簡介

Zepto是一個輕量級的針對現代高階瀏覽器的 JavaScript庫， 它與jquery有著類似的api。
Zepto 主要使用在移動端瀏覽器上面，由於移動端的瀏覽器都是比較新的平臺，而 jQuery 主要是在 PC 上為了瀏覽器的相容性而使用的，所以在移動端一般不使用 jQuery