Vue移動端調用高德獲取當前定位城市

 

場景一：只獲取當前省市

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
}