vue-app之H5获取当前位置信息

超、凢脫俗 2023-08-17 15:31 189阅读 0赞

**在H5app中获取当前定位有很多种方法，比如可以直接调用某个地图的api进行获取当前位置的定位，还有就是[H5+][H5]中的Geolocation模块管理设备位置信息，用于获取地理位置信息。**

在消火栓移动端的项目就是使用到H5+的方法

1.在需要获取定位的地方先把方法编写好，需要用到的是Geolocation模块里的getCurrentPosition: 获取当前设备位置信息。  
在第一次调用该方法时都会走到失败回调函数里，***因为我们没有引入相对应的地图key(百度和高德，腾讯等地图都可以，只要申请好相对应的key)***

onPlusReady(){
    	plus.geolocation.getCurrentPosition(function(p){//成功回调
    		alert('当前位置信息：' + p.coords.latitude + '\nLongitude:' + p.coords.longitude + '\nAltitude:' +p.coords.altitude);
    	}, function(e){//失败回调
    		alert('Geolocation error: ' + e.message);
    	},{geocode:true});
    }

注意：如果你只是想单纯想获取当前位置的经纬度信息则不需要以下配置直接从成功回调中就能获取。  
但是如果需要具体其他位置信息则需要以下配置

2.申请对应的地图Key值（这里申请的是高德地图的）  
点击添加key就会出现这个画面，key名字是自己随便取都可以，但是前面标红心的一定要根据自己的hbuild打包的app来填写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]  
3.在完成第一步的时候，确定那个定位方法有被调用，就将h5的dist拿在hbuild中打包，并安装到自己的手机，这是在运行到定位的方法的页面是就会弹出一个框!**用红线框住的部分就是要用到的部分，绿线画的位置就对应的填到*发布版本安全码SHA1*,然后红色所对应的部分填到*PackageName*里**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]  
4.将第二步的东西填好提交后会出现一个**KEY值**  
![在这里插入图片描述][20190927092729941.png]  
5.那么就将这个key值复制到hbuild打包时要配置SDK相对应的地方  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]  
6.将以上所有步骤完成以后，打包安装好的app就会定位到相对应的位置，并调用成功回调，获取到相对应的参数值

[H5]: http://www.html5plus.org/doc/zh_cn/geolocation.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: /images/20230810/73ba162419d64dfa98bcc54e62dd6a9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: /images/20230810/4466dcb4205c445b97720ee86563e9b2.png
[20190927092729941.png]: /images/20230810/c43289166e2342b7a644fb9559b8674b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: /images/20230810/7866fb9535a54dab97cbf381d598750e.png