Vue 使用高德地图获取当前位置

    公众号项目有一个需求，获取当前用户的位置，传给服务端，服务端返回具体各门店的距离。因为移动端都是用高德地图API地位，为了减少相对应的误差，公众号也选用高德地图。

方法一. 直接调用高德原生 SDK

      1.注册高德地图和获取高德地图的key

     2.项目中index.html文件中引入高德地图 (key代表上面获得的)

<!--高德key-->
<script src="//webapi.amap.com/maps?v=1.3&key=03f14607c0f3122faa4*****930e27"></script>

     3.在项目里创建一个js文件，文件目录如下：

     js文件里定位代码为：

/**
 * 高德地图定位
 * @type {{}}
 */
 const location =  {
  initMap(id){
    let mapObj = new AMap.Map(id, {})
    let geolocation;
    mapObj.plugin(['AMap.Geolocation'], function () {
      geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //  是否使用高精度定位，默认:true
        timeout: 10000, //  超过10秒后停止定位，默认：无穷大
        maximumAge: 0, // 定位结果缓存0毫秒，默认：0
        convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        showButton: true, //  显示定位按钮，默认：true
        buttonPosition: 'LB',  // 定位按钮停靠位置，默认：'LB'，左下角
        buttonOffset: new AMap.Pixel(10, 20), //  定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        showMarker: true, //  定位成功后在定位到的位置显示点标记，默认：true
        showCircle: true, //  定位成功后用圆圈表示定位精度范围，默认：true
        panToLocation: true,  //  定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      })
      mapObj.addControl(geolocation)
      geolocation.getCurrentPosition()
    })
    return geolocation;
  }
}
export default location

   4.在需要调用定位的页面引入positionLocation.js文件

import location from '../utils/positionLocation'

   5. 调用js中的方法，获取当前地理位置

<script>
import location from '../utils/positionLocation'
export default {
  name: 'home',
  data () {
    return {
      location: '',
      lat:0,
      lng:0
    }
  },
  methods: {
    /** 获取高德地图定位 */
    getLocation () {
      let _that = this
      let geolocation = location.initMap('map-container') // 定位
      AMap.event.addListener(geolocation, 'complete', result => {

        console.log(result)
        _that.lat = result.position.lat
        _that.lng = result.position.lng
        _that.location = result.formattedAddress
      })
    }
  },

  mounted() {
    this.getLocation(); // 调用获取地理位置
  }
}

打印结果为：

方法二.使用vue-amap

   vue-amap是基于Vue2.x与高德的地图组件，数据状态与地图状态单向绑定，开发者无需关心地图的具体操作。

   1.npm安装vue-amap

npm install vue-amap --save

   2.在.babelrc文件中配置

{ 
 "presets": [   
   ["es2015", {"modules": false}]  
 ] 
}

  3. 在main.js中引入vue-amap

 import VueAMap from 'vue-amap'; 
  Vue.use(VueAMap);
 
  // 初始化vue-amap
  AMap.initAMapApiLoader({  
  // 高德key  key: '03f14607c0f3122faa4*****930e27',  
  // 插件集合 （插件按需引入） 
   plugin: ['AMap.Geolocation']
   });

 4. 页面调用方法 

<template>
  <div class="amap-page-container">
    <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"> </el-amap>
    <div class="toolbar">
        <span v-if="loaded">
          当前位置为：{{adress}}
        </span>
      <span v-else>正在定位</span>
    </div>
  </div>
</template>

<style>
  .amap-demo {
    height: 300px;
  }
</style>

<script>
  module.exports = {
    data() {
      let that = this;
      return {
        center: [121.59996, 31.197646],
        adress:'',
        loaded: false,
        plugin: [{
          pName: 'Geolocation',
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // 如果key是企业的，还可以直接result.addressComponent获取省市，周边等信息

                  console.log(result);
                  that.adress = result.formattedAddress;
                  self.center = [result.position.lng, result.position.lat];
                  self.loaded = true;
                  self.$nextTick();
                }
              });
            }
          }
        }]
      };
    }
  };
</script>

调用结果：

总结问题：

1.npm install vue-amap --save 报如下警告

解决办法：

npm install -g npm

 npm install stylus

2.定位时警告

原因 为: 在 IOS 10 中，苹果对 webkit 定位权限进行了修改，所有定位请求的页面必须是 https 协议的。如果是非 https 网页，在 http 协议下通过 html5 原生定位接口会返回错误，也就是无法正常定位到用户的位置，而已经支持 https 的网站则不会受影响。

3.注意vue-amap 的导入名不是 AMap， 避免和高德全局的 AMap 冲突。

4.若 eslint 报错 AMap is undefined 之类的错误。请将 AMap 配置到 .eslintrc 的 globals 中。

解决办法：

在.eslintrc.js 中引入 globals

globals: {   
     'AMap': false,   
  },

5.提示 get geolocation timeout.get iplocation failed.

  官方给出原因：

本篇独发金蝶云社区