Vue移动端调用高德获取当前定位城市

坚强是说给别人听的谎言 提交于 2019-12-05 23:24:32

 

场景一:只获取当前省市

1、申请key:

 

 

 注意:是web端(JS API)

 

2、在index.html中添加

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script>

注意:放到body上面

 

3、在webpack.base.conf.js中添加

  externals: {
    'AMap': 'AMap'
  },

注意:在 model.exports = {} 中添加

 

4、在需要获取定位的页面中添加

 AMap.plugin('AMap.CitySearch', function () {
                     var citySearch = new AMap.CitySearch();
                     citySearch.getLocalCity(function (status, result) {
                         if (status === 'complete' && result.info === 'OK') {
                             // 查询成功,result即为当前所在城市信息
                             let province = result.province;
                             let city = result.city;
                         }
                     })
                 })

 


 

场景二:需要获取精确定位

1、申请key:

 

 注意:是android平台,  SHA1是你安卓证书的SHA1,PackageName是你打包时的安卓包名称

 

2、HbuilderX打包时使用在manifest.json -> SDK配置中勾选高德定位,填写第一步申请的key

 

3、直接使用 H5+API获取精准定位 https://www.html5plus.org/doc/zh_cn/geolocation.html

我这里只获取省市县

plus.geolocation.getCurrentPosition(function( position ) {
                     console.log(JSON.stringify(position));
                     let province = position.address.province;
                     let city = position.address.city;
                     let district = position.address.district;
                 }, function(e){
                     // '定位失败';
                 })

如果遇到 plus is not defined.错误


document.addEventListener('plusready', onPlusReady, false);function onPlusReady(){    // 在此调用plus相关API}
 

 

 

 

 

 

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!