高德地图获取手机定位以及经纬度组件

父组件代码：

html代码
<div>
	<get-position :position.sync="currentPosition" :place.sync="currentPlace"/>
</div>

import GetPosition from "../../components/GetPosition"  //引入GetPosition组件
export default {
	data() {
       return {
            currentPosition:{}, //经纬度
            currentPlace:"",//定位地址
        };
	},
}

子组件代码：

<template>
  <div class="get_position">
    <div ref="scriptDiv"></div>
  </div>
</template>

<script>
export default {
  name: "get_position",
  props: {
    place: {
      type: String,
      default: () => {}
    },
    position: {
      type: Object,
      default: () => {}
    }
  },
  model: {
    event: "loaded"
  },
  data() {
    return {
      phoneAddress: ""
    };
  },
  mounted() {
    // 如果缓存中有位置信息，则不用给页面中添加百度脚本。
    // let localPosition = this.$utils.cookie.getCookie(
    //   this.$config.storage.currentPosition
    // );
    // if (localPosition) {
    //   this.$emit("loaded");
    //   return;
    // }
    // 否则
    this.get("//webapi.amap.com/maps?v=1.4.15&key=密钥").then(res => {
      this.appendJsToDom(res, this.$refs.scriptDiv);
      this.getPosition();
    });
  },
  methods: {
    appendJsToDom(jsContent, domContainer) {
      var newScript = document.createElement("script");
      newScript.type = "text/javascript";
      // newScript.src = url;
      newScript.innerHTML = jsContent;
      domContainer.appendChild(newScript);
      this.$emit("loaded");
    },
    get(url) {
      if (!url) {
        console.error("JSONP 至少需要一个url参数!");
        return;
      }
      return new Promise((resolve, reject) => {
        window.jsonCallBack = result => {
          resolve(result);
        };
        var JSONP = document.createElement("script");
        JSONP.type = "text/javascript";
        JSONP.src = `${url}&callback=jsonCallBack`;
        document.getElementsByTagName("head")[0].appendChild(JSONP);
        setTimeout(() => {
          document.getElementsByTagName("head")[0].removeChild(JSONP);
        }, 500);
      });
    },
    /**
     * @description: 获取地理位置
     * @param {type}
     * @return:
     */
    getPosition(callback) {
      AMap.plugin("AMap.Geolocation", () => {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          buttonPosition: "RB", //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true //定位成功后是否自动调整地图视野到定位点
        });

        geolocation.getCurrentPosition((status, result) => {
          if (result && result.position) {
            this.phoneAddress =result.addressComponent.township +result.addressComponent.streetNumber;
            this.$emit("update:place", this.phoneAddress);
            this.$emit("update:position", result.position);
          }
        });
      });
      //解析定位结果
      function onComplete(data) {
        document.getElementById("status").innerHTML = "定位成功";
        var str = [];
        str.push("定位结果：" + data.position);
        str.push("定位类别：" + data.location_type);
        if (data.accuracy) {
          str.push("精度：" + data.accuracy + " 米");
        } //如为IP精确定位结果则没有精度信息
        str.push("是否经过偏移：" + (data.isConverted ? "是" : "否"));
      }
      //解析定位错误信息
      function onError(data) {
        console.log("失败原因排查信息:" + data.message);
      }
    }
  }
};
</script>

<style  scoped>
</style>

填入高德地图密钥即可使用，简单方便。（备注：要调用百度地图或者高德地图需要使用https协议，不然地址有偏差并且存在调不通的情况）