js 配合高德地图 获取当前用户经纬度及位置信息

第一步  引入 js 文件  

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=********************"></script>

这里的 ***********  需要你自己去 高德地图 官网 去注册申请 一个webapi 然后你会得到一个key 放这就可以了

第二步  编写js方法

废话补多少 直接上代码   代码 直接 将方法绑定在了 vue 身上

Vue.prototype.$getLocationInfo= (callback) => {
      //获取当前位置(方法名)
      let map, geolocation;
      //加载地图，调用浏览器定位服务
      map = new AMap.Map('container', {
        resizeEnable: true
      });
      map.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

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', function (obj) {
          callback({status:1,position:obj.position,addressInfo:obj.formattedAddress})
        }); //返回定位信息
        AMap.event.addListener(geolocation, 'error', function (error) {
          callback({status:0})
        }); //返回定位出错信息
      });

我写成了回调模式  所以  在任意页面 你调用即可

this.$getLocationInfo((result) => {

    console.info(result)

})

里面就是地理位置信息了 

这里注意一点   高德地图 申请秘钥地址 https://lbs.amap.com/

申请的时候 记得选 web端  jsAPI哦