Vue中高德地图获取经纬度及逆地理解析的两种方式CDN或NPM(协议必须是https) 否则定位会一直失败

// 高德地图获取经纬度 --npm方式
// npm i @amap/amap-jsapi-loader --save
import AMapLoader from "@amap/amap-jsapi-loader"; //npm方式

export function NPMGetLocation() {
    window._AMapSecurityConfig = {
        securityJsCode: '填写自己的秘钥', //秘钥
    }
    AMapLoader.reset(); //需要把这个reset一下 要不然会一直禁止多种API加载方式混用
    return new Promise((resolve, reject) => {
        AMapLoader.load({
            key: "填写自己的key", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.Geolocation", 'AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等

        })
            .then((AMap) => {
                var geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true, // 是否使用高精度定位，默认：true
                    timeout: 10000, // 设置定位超时时间，默认：无穷大
                });
                var geocoder = new AMap.Geocoder()//逆地理解析
                geolocation.getCurrentPosition(function (status, result) {
                    if (status == "complete") {
                        const { lng, lat } = result.position
                        geocoder.getAddress([lng, lat], function (status, result) {
                            if (status === 'complete' && result.info === 'OK') {
                                //resolve({ type: '地理位置详细信息获取成功', ...result })

                            }
                        })
                        // resolve(result) //只需要获取经纬把这行打开--上面的resolve注释即可,看自己的需求
                    } else {
                        reject({ type: '地理位置详细信息获取失败', ...result })
                    }
                });
            })
            .catch((e) => {
                reject(e)
            });
    })
}
// 高德地图获取经纬度cdn方式
//在index.html的head中引入
//   <script type="text/javascript">
//   window._AMapSecurityConfig = {
//     securityJsCode: "" //秘钥
//   };
// </script>
// <script src="https://webapi.amap.com/maps?v=1.4.15&key=填自己的KEY"></script>
export function CDNGetLocation() {
    return new Promise((resolve, reject) => {
        AMap.plugin(["AMap.Geolocation", "AMap.Geocoder"], function () {
            const geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,
                timeout: 10000,
            });
            var geocoder = new AMap.Geocoder();
            geolocation.getCurrentPosition((status, result) => {
                if (status === "complete") {
                    // 定位成功
                    const { lng, lat } = result.position;
                    geocoder.getAddress([lng, lat], function (status, result) {
                        if (status === "complete" && result.info === "OK") {
                            // result为对应的地理位置详细信息
                            resolve({ type: '地理位置详细信息获取成功', ...result });
                        } else {
                            reject("地理位置详细信息获取失败");
                        }
                    });
                    // resolve(result) //只需要获取经纬把这行打开--上面的resolve注释即可
                } else {
                    reject("获取当前位置失败");
                }
            });
        });
    });
}
//这里是封装成了公共的方法需要引入，直接复制使用
import { NPMGetLocation, CDNGetLocation } from "@/utils/utils";
//页面中使用方式
async initMap() {
      let result = await NPMGetLocation();
      console.log("result", result);
    
    },
mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },