MUI+VUE开发基于H5移动APP的定位问题

引入高德地图提供的JavaScriptAPI 

[html]  view plain  copy

1. <script src="http://webapi.amap.com/mapsv=1.4.4&key=注册高德地图你申请的JavaScriptApiKey"></script>  

定位函数

[html]  view plain  copy

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。

[html]  view plain  copy

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.             }  

暂时就写到这里吧，到时候抽空把相关代码单独抽出来在更新吧。