【高德地图api+Vue】点击地图标记点，并获取经纬度

npm i @amap/amap-jsapi-loader --save

<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
    name: 'mapContainer',
    data() {
        return {
            map: null,
            lnglat: [116.397428, 39.90923]
        };
    },
    mounted() {
   		// DOM初始化完成进行地图初始化
        this.initMap();
    },
    methods:{
        initMap() {
            AMapLoader.load({
                // 申请好的Web端开发者Key，首次调用 load 时必填
                key:'',
                // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                version:'2.0',
                // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                plugins:['']
            }).then((AMap) => {
                // 设置地图容器id
                this.map = new AMap.Map('container', {
                    // 是否为3D地图模式
                    // viewMode:'3D',
                    // 初始化地图级别
                    zoom: 13,
                    center: this.lnglat,
                    // layers: [
                    //     // 卫星
                    //     // new AMap.TileLayer.Satellite(),
                    //     // 路网
                    //     new AMap.TileLayer.RoadNet()
                    // ],
                });
                // this.handleAddMarker();
                this.map.on('click', (ev) => {
                    let lnglat = ev.lnglat;
                    // this.lnglat = [lnglat.lng, lnglat.lat];
                    this.map.clearMap();
                    this.handleAddMarker(lnglat);
                    // this.map.setCenter(this.lnglat);
                })
            })
                .catch(e => {
                    console.log(e);
                });
        },
        handleAddMarker(lnglat) {
            const marker = new AMap.Marker({
                icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                position: lnglat,
                offset: new AMap.Pixel(-13, -30)
            });
            marker.setMap(this.map);
        }
    }
};
</script>
<style  scoped>
#container {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 800px;
}
</style>