VUE高德地图实现根据移动覆盖点获得经纬度坐标和详细地址及根据经纬度确定覆盖点

1. 经纬度手动定位，输入经纬度，显示详细地址。

 async handleMapPositioning() {
            const result = await this.$api.getProductLocation(this.unionId);
            this.reMap = new AMap.Map('map-container-re-locate', {
                zoom: 13,
                viewMode: '2D',
                center: [this.lngMain, this.latMain],
            });
            this.addReMapMarker(this.lngMain, this.latMain, result.createTime);
            const _this = this;
            AMap.service('AMap.Geocoder', function () { //回调函数
                //实例化Geocoder
                var geocoder = new AMap.Geocoder({
                    city: ''//城市，默认：“全国”
                });
                console.log('dasd', _this);
                var lnglatXY = [_this.lngMain, _this.latMain];//地图上所标点的坐标
                geocoder.getAddress(lnglatXY, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        const {
                            province,
                            city,
                            district,
                            township,
                            street,
                            streetNumber
                        } = result.regeocode.addressComponent;
                        var address = '';
                        address = province + city + district + township + street + streetNumber;
                        console.log('ashoialjf', result.regeocode.addressComponent);
                        _this.address = address;
                    } else {
                        _this.$message.info('请输入正确的位置信息');
                    }
                    console.log(address);
                });
            });
        },

2. 根据覆盖点的移动显示当前经纬度

//设置点可以移动
根据移动后的点获取经纬度
addReMapMarker(lng, lat, info) {
            this.reMarker = new AMap.Marker({
                position: [lng, lat],
                offset: new AMap.Pixel(-5, -5),
                cursor: 'move',
                raiseOnDrag: true,
                draggable: true,
                content: '<div class="mk-tips"><img src="/images/map-marker.png" style="width: 14px;height: 14px;"/>' + info + '</div>'
            });
            this.reMarker.on('dragend', e => {
                this.lngMain = e.lnglat.lng;
                this.latMain = e.lnglat.lat;
                console.log('移动的经纬度', this.lngMain, this.latMain);
                this.handleMapPositioning();
            });
            this.reMap.add(this.reMarker);
        },

3. 动态设置多点自适应显示并显示运动轨迹

addMarkers(lng, lat, info) {
            var markers = [];
            var positions = [[116.405467, 39.907761], [116.415467, 39.917761], [116.425467, 39.907761],
                [116.385467, 39.907761]];
            for (var i = 0, marker; i < positions.length; i++) {
                marker = new AMap.Marker({
                    map: this.maps,
                    position: positions[i],
                    content: '<div class="mk-tips"><img src="/images/map-marker.png" style="width: 14px;height: 14px;"/>' + info + '</div>',
                    offset: new AMap.Pixel(0, -7),
                });
                markers.push(marker);
            }
            this.maps.add(markers);
            //绘制线路
            var polyline = new AMap.Polyline({
                map: this.maps,
                path: positions,
                showDir: true,
                strokeColor: '#28F',
                strokeWeight: 3,
            });
            var passedPolyline = new AMap.Polyline({
                map: this.maps,
                strokeColor: 'red',
                strokeWeight: 3,
                showDir: true,
                strokeOpacity: 0.7
            });
            marker.on('moving', function (e) {
                passedPolyline.setPath(e.passedPath);
            });
            this.maps.setFitView();
            marker.moveAlong(positions, 5000);
        },