引入高德地圖提供的JavaScriptAPI 

1. <script src="http://webapi.amap.com/mapsv=1.4.4&key=註冊高德地圖你申請的JavaScriptApiKey"></script>  

定位函式

1. //獲取位置  
2.             function getAddress() {  
3.                 //高德地圖API  
4.                 //AMap.service解決只使用高德Geolocation功能提示Geolocation不是建構函式問題    
5.                     AMap.service(["AMap.Geolocation"],function(){  
6.                     var geolocation = new AMap.Geolocation();  
7.                     geolocation.getCurrentPosition(function(status,result) {  
8.                         if(status=="complete"){  
9.                             attendanceVue.currentAddress.ADDRESS=result.formattedAddress; //設定當前地址   
10.                             attendanceVue.currentCityCode
     = result.addressComponent.citycode; //設定當前城市code  
11.                             //設定當前經緯度  
12.                             attendanceVue.currentLngLat.push(result.position.lng);   
13.                             attendanceVue.currentLngLat.push(result.position.lat);  
14.                         }else{  
15.                             attendanceVue.currentAddress.ADDRESS
    =result.message;  
16.                         }  
17.                      });  
18.                 });  
19.             }  

geolocation的getCurrentPosition函式預設配置基本上就能滿足我的需求，配置詳情可參考高德地圖定位文件。使用該方法打包後的定位基本上與html5 自帶的定位外掛定位沒有差距且在Android4.0與ios10.0版本及以上版本均做過測試且測試無問題。但難免定位會有一定差距，高德地圖還額外提供了根據當前位置獲取附近位置的Api（web服務Api），本文使用的Web服務Api  ，JavaScriptApi 也提供了獲取附近位置介面但考慮到獲取附近位置頁面將做為公共頁面且引用網路路徑的JavaScript佔頻寬最終選擇了web服務Api。

1. /**  
2.              * 獲取附近位置  
3.              * 使用高德地圖web搜尋服務介面,Api文件地址：http://lbs.amap.com/api/webservice/guide/api/search  
4.              * @param {Object} keywords 搜尋關鍵字  
5.              * @param {Object} currentCityCode 當前城市編碼  
6.              * @param {Object} currentLngLat 當前經緯度  
7.              * @param {Object} pageIndex 頁碼  
8.              * @param {Object} pageSize 記錄條數（強烈建議不超過25，若超過25可能造成訪問報錯）  
9.              * @param {Object} radius 根據當前經緯度查詢範圍單位米  
10.              */  
11.             function searchAddress(keywords,currentCityCode,currentLngLat,pageIndex,pageSize,radius) {  
12.                 ca.get({  
13.                     url: 'http://restapi.amap.com/v3/place/around?key=申請高德地圖Web服務API的Key',  
14.                     data: {  
15.                         'keywords':keywords,  
16.                         'city': currentCityCode,  
17.                         'types': '公司企業|道路附屬設施|公共設施|商務住宅|餐飲服務|購物服務|生活服務|交通設施服務|',  
18.                         'location': currentLngLat,  
19.                         'offset': pageSize,  
20.                         'page': pageIndex,  
21.                         'radius': radius  
22.                     },  
23.                     succFn: function(result) {  
24.                         var data = evalObj(result);  
25.                         if(data.status == 1 && data.info === 'OK') {  
26.                             //如果查詢關鍵字為空則重置查詢結果，關鍵字不為空的查詢結果需迭代追加否則會造成資料結構混亂Vue繫結不到Dom上  
27.                             if(isEmpty(keywords)){  
28.                                 mui.each(data.pois,function(index,element){  
29.                                     addressVue.ADDRESS_LIST.push(element);  
30.                                 });  
31.                             }else{  
32.                                 addressVue.ADDRESS_LIST=data.pois;  
33.                             }  
34.                         }  
35.                     }  
36.                 });  
37.             }  

暫時就寫到這裡吧，到時候抽空把相關程式碼單獨抽出來在更新吧。