vue 高德地图获取经纬度 如何处理？

Question

问题描述

项目中想获取当前经纬度，传给后端，在获取数据

问题出现的环境背景及自己尝试过哪些方法

1、@vue/cli 4.2.3创建的项目
2、按照网上的方案，在public/index.html下引入

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

3、在需要获取经纬度的页面

created() {
    this.getLocation()
},
methods: {
    getLocation() { // 从高德地图api获取浏览器定位
        const that = this
        AMap.plugin('AMap.Geolocation', function () {
            let geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                // 设置定位超时时间，默认：无穷大
                timeout: 10000
            })

            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)

            function onComplete(data) {
                // data是具体的定位信息
                console.log(data)
            }

            function onError() {
                // 定位出错
                that.getLatLngLocation()
            }
        })
    },
    getLatLngLocation() {
        AMap.plugin('AMap.CitySearch', function () {
            let citySearch = new AMap.CitySearch()
            citySearch.getLocalCity(function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    // 查询成功，result即为当前所在城市信息
                    AMap.plugin('AMap.Geocoder', function () {
                        let geocoder = new AMap.Geocoder({
                            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                            city: result.adcode
                        })
                        let lnglat = result.rectangle.split(";")[0].split(",")
                        geocoder.getAddress(lnglat, function (status, data) {
                            if (status === 'complete' && data.info === 'OK') {
                                // data为对应的地理位置详细信息
                            }
                        })
                    })
                }
            })
        })
    }
}

相关代码

粘贴代码文本（请勿用截图）

你期待的结果是什么？实际看到的错误信息又是什么？

网上的文档，到此就能在控制台上打印出经纬度。
但是我这里却报错

AMap is not defined

Answer 1

我自己找到方法了：
在根目录下新建vue.config.js文件,输入一下内容:

module.exports = {
    configureWebpack: {
        externals: {
            'AMap': 'AMap' // 高德地图配置
        }
    },
    devServer: {
        https: true // 启动https 不然定位要失败
    }
};

重启vue项目,

在需要获取定位的页面,引入AMap

import AMap from 'AMap'

然后对接以上代码!