v3百度地图标记点位，查询功能

<template>
    <div class="baidu_map">
        <el-form ref="form" label-suffix="：" label-width="100px">
            <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="详细地址">
                        <el-autocomplete style="width:100%;" popper-class="autoAddressClass" v-model="mapData.address"
                            :fetch-suggestions="querySearch" :trigger-on-focus="false" placeholder="请输入详细地址"
                            @select="handleSelect" clearable>
                            <template #default="{ item }">
                                <div class="autoAddressClass_item">
                                    <ElIcon :size="20" color="balck">
                                        <Search />
                                    </ElIcon>
                                    <div>
                                        <div class="title">{{ item.title }}</div>
                                        <span class="address ellipsis">{{ item.address }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-autocomplete>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="经纬度" prop="projectId">
                        <el-input disabled placeholder="请选择经纬度" v-model="mapData.point" type="text"
                            :readonly="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div id="map" style="width: 100%;height: 500px;"></div>
        </el-form>
    </div>
</template>
  
<script setup>
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
// 初始化经纬度 宽高 层级
const mapData = ref({
    address: '',//详细地址
    point: '',//经纬度
    lat: '', //经度
    lng: '', //纬度
})

const BMap = window.BMap

let Map = null
let mk = null
onMounted(() => {
    //初始化地图 禁用地图默认点击弹框
    Map = new BMap.Map('map', { enableMapClick: false })
    var point = new BMap.Point(118.80423639044062, 31.97470550283221)
    // 初始化 地图经纬度 层级
    Map.centerAndZoom(point, 12)
    Map.enableScrollWheelZoom(true)

    //创建一个图像标注实例 启用拖拽 默认为false
    mk = new BMap.Marker(point, { enableDragging: true })
    Map.addOverlay(mk) //将覆盖物添加到地图中
    mk.addEventListener('dragend', function (e) {
        getAddrByPoint(e.point) //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
    })
    // 添加地图点击事件
    // Map.addEventListener('click', function (e) {
    //     console.log('点击的经纬度：' + e.point.lng + ',' + e.point.lat)
    // })
})
function querySearch(str, cb) {
    var options = {
        //检索完成后的回调函数
        onSearchComplete: function (res) {
            var arr = [];
            if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                for (var i = 0; i < res.getCurrentNumPois(); i++) {
                    arr.push(res.getPoi(i));
                }
            }
            //获取到数据时，通过回调函数cb返回到<el-autocomplete>组件中进行显示
            cb(arr)
        }
    }
    //创建LocalSearch构造函数
    var local = new BMap.LocalSearch(Map, options)
    local.search(str)
}

function handleSelect(item) {
    // 保存当前数据
    mapData.value = {
        address: item.address,
        point: item.point.lat + ',' + item.point.lng,
        lat: item.point.lat,
        lng: item.point.lng
    }
    //清除地图上所有覆盖物
    Map.clearOverlays()
    //根据所选坐标重新创建Marker 记住打开可拖拽 默认是不打开的
    mk = new BMap.Marker(item.point, { enableDragging: true })
    mk.addEventListener('dragend', function (e) {
        getAddrByPoint(e.point) //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
    })
    //将覆盖物重新添加到地图中
    Map.addOverlay(mk)
    //将地图的中心点更改为选定坐标点
    Map.panTo(item.point)
}
function getAddrByPoint(point) {
    var geco = new BMap.Geocoder();
    console.log(point);
    geco.getLocation(point, function (res) {
        console.log(res);
        mapData.value = {
            address: res.address,
            point: point.lat + ',' + point.lng,
            lat: point.lat,
            lng: point.lng
        }
        mk.setPosition(point) //重新设置标注的地理坐标
        Map.panTo(point)  //将地图的中心点更改为给定的点
    })
}
</script>
  
<style scoped lang="less">
.autoAddressClass {
    li {
        .title {
            line-height: 30px;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .address {
            line-height: 1;
            font-size: 12px;
            color: #b4b4b4;
            margin-bottom: 5px;
        }

        .autoAddressClass_item {
            overflow: hidden;
            display: flex;
            align-items: center;

            .el-icon {
                margin-right: 20px;
            }
        }
    }
}
</style>