cellsysArt/components/amapSearch.vue

<template>
    <el-drawer
        v-model="dialogVisible"
        :title="title"
        :size="GLOBAL.drawerSize"
        append-to-body
        :close-on-click-modal="false"
        :destroy-on-close="true"
        @open="open">
        <div class="container">
            <div
                class="search-container"
                v-if="!isReadonly">
                <div class="search-input">
                    <el-input
                        @keydown.enter="handleSearch"
                        v-model="searchAddress"
                        placeholder="请输入地址进行查询"></el-input>
                    <el-button
                        style="margin-left: 8px"
                        plain
                        type="primary"
                        @click="handleSearch">
                        查询
                    </el-button>
                </div>
                <el-card
                    class="search-panel"
                    v-if="searchPanelVisible">
                    <ul>
                        <li
                            v-for="item in list"
                            class="poibox search-item"
                            @click="renderMarker(item)">
                            <h3 class="poi-title">
                                <span class="poi-name amap-ellipsis">{{ item.name }}</span>
                            </h3>
                            <div
                                class="poi-info"
                                :title="item.address">
                                <p class="poi-addr amap-ellipsis">地址：{{ item.address }}</p>
                            </div>
                        </li>
                    </ul>
                </el-card>
            </div>
            <div
                class="map-container"
                ref="amapSearch"
                :style="{ height: mapHeight }"></div>

            <div class="detail-container">
                <el-form
                    ref="form"
                    label-position="top"
                    :rules="formRules"
                    :model="form">
                    <el-form-item
                        label="详细地址信息"
                        prop="address">
                        <el-input
                            v-model="form.address"
                            placeholder="填写详细地址"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <template
            v-if="!isReadonly"
            #footer>
            <span class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button
                    type="primary"
                    @click="handleConfirm">
                    确定
                </el-button>
            </span>
        </template>
    </el-drawer>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

let amapKey = '6fb9a8497a691e98c94b3365d26e89bc';
try {
    amapKey = import.meta.env.VITE_APP_AMAP_KEY;
} catch (e) {}

export default {
    name: 'GeocoderComponent',
    props: {
        modelValue: Boolean,
        currentPosition: Object, //geometry格式
        address: String,
        title: {
            type: String,
            default: '详细位置',
        },
        isReadonly: {
            type: Boolean,
            default: false,
        },
        isGetCurrentPosition: {
            //是否自动获取当前定位，由高德提供获取当前定位功能，通常在数据创建时需要启用，在数据编辑时需要关闭
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            searchAddress: '',
            map: null, // 地图实例
            placeSearch: null, //搜索地址
            geocoder: null, //逆向地理编码
            list: [],
            location: null,
            marker: null,
            // 初始地图高度为100%
            initialMapHeight: '100%',
            //获取浏览器当前定位
            geolocation: null,
            searchPanelVisible: false,
            form: {
                address: '',
            },
            formRules: {
                address: [{ required: true, message: '请输入详细地址！', trigger: 'blur' }],
            },
        };
    },
    computed: {
        dialogVisible: {
            get() {
                return this.modelValue;
            },
            set(val) {
                this.$emit('update:modelValue', val);
            },
        },
        // 计算属性，根据list的长度来决定地图的高度
        mapHeight() {
            // 如果list有数据，则地图高度为50%，否则为100%
            return this.list.length > 0 ? '100%' : this.initialMapHeight;
        },
    },
    created() {
        AMapLoader.load({
            key: amapKey,
            version: '2.0',
            plugins: ['AMap.PlaceSearch', 'AMap.Geocoder'],
        }).then((AMap) => {
            this.geocoder = new AMap.Geocoder({
                city: '全国',
                extensions: 'all',
            });
            if (this.isGetCurrentPosition) {
                //获取浏览器定位功能
                AMap.plugin('AMap.Geolocation', () => {
                    this.geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true, // 是否使用高精度定位，默认：true
                        timeout: 10000, // 设置定位超时时间，默认：无穷大
                        offset: [10, 20], // 定位按钮的停靠位置的偏移量
                        zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                        panToLocation: true,
                        showMarker: true,
                        position: 'RB', //  定位按钮的排放位置,  RB表示右下
                        convert: true, //转化为高德坐标
                    });
                    this.getCurrentPosition()
                        .then((res) => {
                            let { address, location } = res;
                            this.form.address = address;
                            let geometry = {
                                type: 'Point',
                                coordinates: [location.lng, location.lat],
                            };
                            this.coordinates = [location.lng, location.lat];
                            this.$emit('getAddress', geometry, this.form.address);
                        })
                        .catch((err) => {
                            this.$emit('error', err);
                        });
                });
            }
        });
    },
    methods: {
        open() {
            AMapLoader.load({
                key: amapKey,
                version: '2.0',
                plugins: ['AMap.PlaceSearch', 'AMap.Geocoder'],
            }).then((AMap) => {
                // 初始化地图
                this.map = new AMap.Map(this.$refs.amapSearch, {
                    resizeEnable: true, // 是否监控地图容器尺寸变化
                    zoom: 18, // 初始化地图层级
                    animateEnable: false,
                });
                this.placeSearch = new AMap.PlaceSearch({
                    city: '全国',
                    map: this.map,
                    pageSize: 20, // 单页显示结果条数
                    autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });
                this.placeSearch.on('selectChanged', (target) => {
                    let { selected } = target;
                    let { address, location } = selected.data;
                    this.coordinates = [location.lng, location.lat];
                    this.form.address = address;
                });

                //有定位时不获取默认定位和当前位置
                if (this.currentPosition && this.currentPosition.coordinates.length > 0) {
                    let [lng, lat] = this.currentPosition.coordinates;

                    this.renderMarker({
                        address: this.address || '未知定位',
                        location: {
                            lng: lng,
                            lat: lat,
                        },
                    });
                    this.coordinates = [lng, lat];
                    this.form.address = this.address;
                    /*this.coordinateToAddress(this.currentPosition.coordinates);*/
                }
              this.map.on('click', this.showInfoClick);
            });
        },
        handleConfirm() {
            this.$refs.form.validate().then((valid) => {
                if (valid) {
                    if (!this.coordinates) {
                        this.$message.error('请在地图上确定您的目标地点');
                        return;
                    }
                    let geometry = { type: 'Point', coordinates: this.coordinates };
                    this.$emit('getAddress', geometry, this.form.address);
                    this.close();
                }
            });
        },

        handleSearch() {
            if (this.searchAddress) {
                this.placeSearch.search(this.searchAddress, (status, result) => {
                    this.searchPanelVisible = true;
                    if (status === 'complete' && result.info === 'OK') {
                        if (result.poiList && result.poiList.pois.length > 0) {
                            this.list = result.poiList.pois;
                            this.location = this.list[0].id;
                            /*this.renderMarker(this.list[0]);*/
                        } else {
                            this.map.clearMap();
                            this.list = [];
                            this.$message.error('无法找到该地址！');
                        }
                    } else {
                        this.$message.warning('无法找到该地址！');
                        this.list = [];
                        this.clearMarker();
                    }
                });
            }
        },
      showInfoClick(e){
        let lnglat= [e.lnglat.getLng(), e.lnglat.getLat()]
        this.coordinateToAddress(lnglat)
      },
        coordinateToAddress(lnglat) {
            let that = this;
            this.list = [];
            this.geocoder.getAddress(lnglat, function (status, result) {
                console.log(result.regeocode.pois);
                if (status === 'complete' && result.info === 'OK') {
                    // result中对应详细地理坐标信息
                    that.list = result.regeocode.pois;
                    let details = that.list.filter((item) => {
                        let location = new AMap.LngLat(
                            Number(item.location.lng),
                            Number(item.location.lat),
                        );
                        if (location.lng === lnglat[0] && location.lat === lnglat[1]) {
                            return item;
                        }
                    });
                    if (details.length > 0) {
                        that.location = details[0].id;
                        that.searchAddress = details[0].name;
                        that.renderMarker(details[0]);
                    } else {
                        that.location = that.list[0].id;
                        that.searchAddress = that.list[0].name;
                        that.renderMarker(that.list[0]);
                    }
                }
            });
        },
        renderMarker(pois) {
            this.clearMarker(); // 清除之前的标记
            let location = pois.location;
            this.map.setCenter([location.lng, location.lat]);
            // 移动地图视野到标记位置
            // this.map.setZoomAndCenter(16, [location.lng, location.lat]);
            this.coordinates = [location.lng, location.lat];
            // 创建标记
            this.marker = new AMap.Marker({
                position: [location.lng, location.lat],
                map: this.map,
            });

            // 创建信息窗口
            let infoWindowContent = `<div style="width: 200px">`;
            if (pois.name) {
                infoWindowContent += `<h3>${pois.name}</h3>`;
            }
            if (pois.address) {
                infoWindowContent += `<p>地址：${pois.address}</p>`;
            }
            infoWindowContent += '</div>';
            let infoWindow = new AMap.InfoWindow({
                content: infoWindowContent, // 使用 HTML 设置信息窗口内容
                offset: new AMap.Pixel(0, -10),
            });
            setTimeout(() => {
                // 打开信息窗口
                infoWindow.open(
                    this.map,
                    new AMap.LngLat(Number(location.lng), Number(location.lat)),
                );
            });
            this.searchPanelVisible = false;
            this.marker.on('click', () => {
                if (pois.address) {
                    this.form.address = pois.address;
                }
            });
            if (pois.address) {
                this.form.address = pois.address;
            }
        },
        close() {
            this.dialogVisible = false;
        },
        clearMarker() {
            if (this.marker) {
                this.marker.setMap(null);
                this.marker = null;
            }
        },
        getCurrentPosition() {
            return new Promise((resolve, reject) => {
                if (!this.geolocation) reject();
                this.geolocation.getCurrentPosition((status, result) => {
                    if (status === 'complete') {
                        let position = result.position;
                        this.geocoder.getAddress([position.lng, position.lat], (status, result) => {
                            if (status === 'complete' && result.info === 'OK') {
                                let pois = result.regeocode.pois;
                                if (pois.length > 0) {
                                    let { address, location } = pois[0];
                                    resolve({
                                        address,
                                        location,
                                    });
                                    /* this.renderMarker({
                                        name: '当前定位',
                                        address: address,
                                        location: {
                                            lng: location.lng,
                                            lat: location.lat,
                                        },
                                    });*/
                                }
                            } else {
                                resolve({
                                    address: '',
                                    location: position,
                                });
                                /*this.renderMarker({
                                    name: '当前定位',
                                    location: {
                                        lng: position.lng,
                                        lat: position.lat,
                                    },
                                });*/
                            }
                        });
                    } else {
                        //因为权限或其他原因导致无法自动获取定位，不抛出异常，由用户手动选择地址即可
                        console.error(result);
                        /* reject(result);*/
                        /* this.$emit('error', '无法获取定位信息：' + result.message);*/
                    }
                });
            });
        },
    },
};
</script>

<style scoped>
.search-container {
    position: relative;
    width: 100%;
    height: 40px;
    background-color: #fff;
}
.search-input {
    display: flex;
}
.search-panel {
    position: absolute;
    width: 100%;
    background-color: #fff;
    z-index: 2;
    max-height: 50vh;
    overflow-y: scroll;
}
.search-item {
}
.poibox {
    border-bottom: 2px solid #e8e8e8;
    cursor: pointer;
    padding: 10px 0;
    position: relative;
    min-height: 5.5rem;
    width: 100%;
    .poi-title {
        margin-left: 10px;
        font-size: 14px;
        font-weight: 700;
        overflow: hidden;
        margin-top: 0;
    }
    .poi-info {
        word-break: break-all;
        margin-left: 10px;
        overflow: hidden;
    }
}
/* 默认样式，适用于web端 */
.container {
    display: flex;
    height: 100%;
    flex-direction: column; /* 改为上下布局 */
}

.map-container {
    position: relative;
    flex: 1; /* 占据剩余空间 */
    min-height: 30vh;
    margin-bottom: 10px;
    z-index: 1;
}

.detail-container {
    margin-top: 10px;
}
/* 移动端样式 */
@media (max-width: 768px) {
    .search-container {
        margin-left: 0; /* 移除间距 */
        margin-top: 10px; /* 添加上下间距 */
        width: 100%;
    }
}
</style>