YZProjectCloud/yanzhu-ui-vue3/src/components/BaiduMap/Map.vue

<template>
    <el-dialog :title="title" v-model="show" width="800px" append-to-body class="baidu-map-dialog"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <div class="div-info">
            <div>经度纬度:{{ point ? (point.lng.toFixed(5) + "," + point.lat.toFixed(5)) : '' }}</div>
            <div>详细地址:{{ getAddress() }}</div>
            <div style="margin-top: 10px;text-align: center;" v-if="getAddress()">
                <el-button size="small" type="primary" @click="doOk">确定</el-button>
            </div>
        </div>
        <div id="index-map" style="width: 100%;height:600px;"></div>
    </el-dialog>
</template>

<script setup>
const show = ref(false);
const title = ref("");
const map = ref("");
const point = ref("");
const cityInfo = ref("");

const emit = defineEmits(["docom"]);

function getCity(data, cb) {
    let myPoint = new BMapGL.Point(+data.longitude, +data.latitude);
    let myGeo = new BMapGL.Geocoder({ extensions_town: true });
    myGeo.getLocation(myPoint, r => {
        let cityInfo = {
            address: r.content?.address || '',
            poi_desc: r.content?.poi_desc || '',
            district: r.content?.address_detail?.district || '',
            city: r.content?.address_detail?.city || '',
            province: r.content?.address_detail?.province || ''
        }
        cb && cb(myPoint, cityInfo);
    });
}

function doOk() {
    emit("docom", point.value, cityInfo.value);
    show.value = false;
}

function getAddress() {
    let addr = cityInfo.value?.address || '';
    return addr;
}

function showDlg(opt) {
    title.value = opt?.title || '选择地址';
    show.value = true;
    setTimeout(() => {
        initMap(opt);
    }, 400);
}

function currentPoint() {
    let geolocation = new BMapGL.Geolocation();
    geolocation.enableSDKLocation();
    geolocation.getCurrentPosition(e => {
        if (e.point) {
            let point = e.point
            let initMarker = new BMapGL.Marker(point);
            map.value.centerAndZoom(point, 18);
            map.value.addOverlay(initMarker);
        }
    })
}

function mapClick(e) {
    point.value = e.latlng;
    let myGeo = new BMapGL.Geocoder({ extensions_town: true });
    myGeo.getLocation(e.latlng, r => {
        if (r) {
            cityInfo.value = {
                address: r.content?.address || '',
                poi_desc: r.content?.poi_desc || '',
                district: r.content?.address_detail?.district || '',
                city: r.content?.address_detail?.city || '',
                province: r.content?.address_detail?.province || ''
            }
        } else {
            cityInfo.value = {}
        }
    });
}

function initMap(opt) {
    let imap = new BMapGL.Map("index-map");

    map.value = imap;
    let point = new BMapGL.Point(116.404, 39.915);
    //初始化地图，设置中心点坐标和地图级别
    map.value.centerAndZoom(point, 15);
    map.value.setDefaultCursor("crosshair");//设置地图默认的鼠标指针样式
    map.value.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用。

    //创建点坐标

    //创建标注
    let initMarker = new BMapGL.Marker(point);
    //向地图中添加单个覆盖物时会触发此事件
    map.value.addOverlay(initMarker);
    //开启标注拖拽功能
    //initMarker.enableDragging();
    //将标注点移动到中心位置            


    //添加地图默认控件
    map.value.addControl(new BMapGL.NavigationControl());
    //开启鼠标滚轮缩放
    map.value.addEventListener("click", mapClick);
    var myGeo = new BMapGL.Geocoder();
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint('经河新城', function (point) {
        if (point) {
            map.value.centerAndZoom(point, 16);
            map.value.addOverlay(new BMapGL.Marker(point, { title: '经河新城' }))
            map.value.enableScrollWheelZoom(true);
            //map.value.setHeading(64.5);   //设置地图旋转角度
            //map.value.setTilt(73);       //设置地图的倾斜角度
        } else {
            alert('您选择的地址没有解析到结果！');
        }
        initMapData(opt)
    }, '陕西省')
    currentPoint();
}
function initMapData(data) {
    if (data.latitude && data.longitude) {
        point.value = {}
        point.value.lng = data.longitude * 1.0;
        point.value.lat = data.latitude * 1.0;
    }
    cityInfo.value = {}
    cityInfo.value.address = data.projectAddress || ''
    cityInfo.value.district = data.district || ''
    cityInfo.value.city = data.city || ''
    cityInfo.value.province = data.province || ''
}

/** 暴露组件 */
defineExpose({
    showDlg,
    initMapData
});
</script>
<style lang="scss">
.baidu-map-dialog {
    .el-dialog__body {
        position: relative;
        padding: 0px;

        .div-info {
            position: absolute;
            top: 0px;
            right: 10px;
            width: 300px;
            font-size: 12px;
            background: rgba(255, 255, 255, 0.5);
            box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
            z-index: 99999;
            padding: 8px;
            border: solid 1px #ccc;
            color: #51b5ff;
            line-height: 24px;
        }
    }
}
</style>