Vue项目实现高德地图拖动marker获取坐标并根据坐标反查出详细地址

效果：在高德地图中拖拽marker获取当前的坐标点，再根据当前的坐标点反查出当前的地址详细

 效果：

 实现方式：

一、先参考下文将高德地图安装到项目中

vue项目中使用高德地图_vue 使用高德地图_前端-文龙刚的博客-CSDN博客

 二、全部代码

<template>
    <!-- 用来显示地图 -->
    <div id="Map" style="height: 100vh;">
        <div class="loction">
            <el-descriptions title="地址信息" border>
                <el-descriptions-item label="lng" :span="2">{
   
   {lng}}</el-descriptions-item>
                <el-descriptions-item label="lat" :span="2">{
   
   {lat}}</el-descriptions-item>
                <el-descriptions-item label="详细地址">{
   
   { addersTextInfo }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>

<script>
//引入高德地图
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
    name: 'MapIndex',

    data() {
        return {
            map: null, //地图实例
            lng:'',
            lat:'',
            addersTextInfo:''
        };
    },

    mounted() {
        this.initMap()
    },

    methods: {
        initMap() {
            AMapLoader.load({
                key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
                //2.0版本太卡了 ，所以使用的1.4.0版本  其插件也有不同  如：ToolBar
                version: "1.4.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
                plugin: [
                    'AMap.Geocoder',地图编码
                    'AMap.Autocomplete',// 输入提示插件
                    'AMap.PlaceSearch',// POI搜索插件
                    'AMap.OverView',// 地图鹰眼插件
                    'AMap.MapType',// 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
                    'AMap.PolyEditor',// 编辑 折线多，边形
                    'AMap.CircleEditor',// 圆形编辑器插件
                    'AMap.ControlBar',
                    'AMap.MouseTool',
                    'AMap.GeometryUtil',
                    'AMap.DistrictSearch',
                    'AMap.TruckDriving',// 路径规划
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                var that = this
                console.log(AMap);
                this.map = new AMap.Map("Map", { //设置地图容器id
                //这里的参数有许多可根据需要添加  点击下面《map地图参数》跳转
                    viewMode: "3D", //是否为3D地图模式
                    zoom: 14, //初始化地图级别
                    resizeEnable: true,
                   // center: [116.397128, 39.916527], //初始化地图中心点位置
                });

                //设置可拖动坐标-S
                var marker = new AMap.Marker({
                    map: this.map,
                    // position: this.map.getCenter(),
                    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                    offset: new AMap.Pixel(-13, -30),
                    // 设置是否可以拖拽
                    draggable: true,
                    cursor: 'move',
                    // 设置拖拽效果
                    raiseOnDrag: true
                    // position: [116.397128, 39.916527],
                });
                marker.on('dragend', function() {//拖动坐标获取新坐标
                    console.log('最新坐标：',marker.getPosition())
                    var coordinate = marker.getPosition()
                    that.lng=coordinate.lng
                    that.lat=coordinate.lat

                    //反查地址-S
                    let geocoder
                    AMap.plugin('AMap.Geocoder',function(){
                        geocoder = new AMap.Geocoder()
                    })
                    geocoder.getAddress([that.lng,that.lat],function (status, result) {
                        if (status === "complete" && result.info === "OK") {
                            console.log('地址获取成功：',result.regeocode.formattedAddress)
                            that.addersTextInfo = result.regeocode.formattedAddress
                        }
                    });
                    //反查地址-E
                });
                marker.setMap(this.map);
                //设置可拖动坐标-E
                
                // 设置点标记的动画效果，此处为弹跳效果
                marker.setAnimation('AMAP_ANIMATION_BOUNCE');
                

            }).catch(e => {
                console.log(e);
            })
		}
    },
};
</script>

<style scoped>
    .loction{top:10px;left:50px;width:500px;position:fixed;z-index:9;}
</style>

万事大吉        (#^.^#)