vue中利用高德地图选取经纬度

项目中要求，鼠标点击地图可以获取到当前地址的经纬度

点击哪里，输入框中就会绑定哪里的经纬度 ，这里用的是高德地图来实现的，首先要去高德地图api申请一个key  高德地图 这里不过多介绍。

下面来看实现方法

首先根据高德地图的引导安装插件vue中安装高德地图

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

上代码

<template>
    <div class="drawStation">
        <div style="font-size:13px;margin:0 0 -10px 130px;">点击基地地址，获取基地经纬度</div>
        <div id="draw-station-container">
            <div class="input">
                <el-input v-model="location.lng" size="small" placeholder="经度"></el-input>
                <el-input v-model="location.lat" size="small" placeholder="纬度"></el-input>
            </div>
        </div>
    </div>
</template>
   
<script>
import AMapLoader from "@amap/amap-jsapi-loader"
export default {
    name: "DrawStation",
    data() {
        return {
            // 地图对象
            AMap: null,
            // 地图实例对象
            map: null,
            // 经纬度
            location: {
                lat: '',
                lng: ''
            },
        }
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.initMap()
    },
    methods: {
        /**
         * 创建地图
         */
        initMap() {
            AMapLoader.load({
                key: '你的key', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then((AMap) => {
                    this.AMap = AMap
                    this.map = new AMap.Map("draw-station-container", {
                        //设置地图容器id
                        viewMode: "3D", //是否为3D地图模式
                        zoom: 15, //初始化地图级别
                        center: [121.77, 39.05], //初始化地图中心点位置
                        // mapStyle: 'amap://styles/macaron', //设置地图的显示样式
                    })
                    // 地图点击事件
                    this.map.on('click', this.clickMapHandler)
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        // 点击地图事件
        clickMapHandler(e) {
            this.location.lng = e.lnglat.getLng()
            this.location.lat = e.lnglat.getLat()
        },
    },
};
</script>
   
<style scoped>
.drawStation #draw-station-container {
    padding: 0px;
    /* margin: 20px 0 20px 0; */
    margin: 20px auto;
    width: 500px;
    height: 300px;
}

.el-input {
    width: 150px;
    margin: 10px 0 0 10px;
    z-index: 5;
}
</style>

这样就可以了，还是很简单的

这里也给大家推荐两个高德地图的插件

vue-amap

AMap-vue（不支持vue3）

不要看它俩名字像，这是两个插件

直接cv拿去，不用谢